【老生常谈👴】系列好久都没更新啦,这次终于准备在这个系列上加点内容了,哈哈!而这次给大家带来的便是 flex布局,这个已经在现在前端开发中经常使用到的属性,虽然是一个“老东西”了。但是不妨碍它的重要性,因此这篇文章就准备聊聊关于它的事儿,废话不多说,开搞!

ppx2.jpg

什么是flex布局

flex是 flexible 的缩写,翻译过来就是 弹性布局,从它的名称上我们就知道它是一种高度灵活的布局方式,通过它我们可以很轻易的完成较为复杂的布局,例如水平垂直居中等

任何元素都可以使用flex布局,块级元素只需加上display:flex,行内元素加上display:inline-flex,这时该元素就称为了 容器,需要注意的是flex布局中,子元素的float、clear将失效,并且不存在块级和行内元素之分,都统称为 flex-item

本文将从 容器flex-item 两方面去讲解,go,go,go!

ran.jpeg

容器

容器中存在两条轴,一条 主轴,方向为 从左到右,另一条为 交叉轴,与主轴 垂直交叉,方向为 从上到下

对于flex容器,它有如下属性:

flex-item

它包含如下属性

结语

在前端的蛮荒年代,我们多用position,float之类的属性来构建页面,但经历过的人都知道那是一段艰难的岁月,但随着css不断规范化,涌现出的新规范让我们能越来越轻松地搭建页面,我想这就是技术的魅力吧,好啦,就写到这啦,over!