前端开发中的一个痛点,就是到底如何布局?
在 CSS3 出现之前,业界流行各种各样的经典布局,比如左边固定右边自适应,左右固定中间自适应,圣杯布局,等等,纠其本质,无非是使用了 display,float,position 这三个属性的组合,非常的繁琐复杂,这样的实现,并不能保证解决所有问题。
于是在 2009 年的 W3C 草案中提出了 flex 布局,它实现了非常方便的页面布局,截止到本文撰写日期,所有的主流浏览器均有良好的支持。
值得注意的是,如果使用webkit 浏览器,需要添加 webkit 前缀。同时,一旦某个元素被设置为 flex 容器以后,里面的子元素 float,clear,和 vertical-align 属性将会失效。
首先我们来看下面这张图
外层容器被设为 display: flex 后,里面所有的相关术语全部在上图中标出。
main axis 也成为主轴,cross axis 也称为交叉轴。容器里面的子元素我们称为 flex 项目。
flex 容器可以设置如下 6 个属性:
flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content
1 flex-direction : row | column | row-reverse | column-reverse
表示容器 main axis 的对齐方向
默认情况下为
div {
flex-direction: row;
}
row-reverse
column
column-reverse
2 flex-wrap: wrap | nowrap | wrap-reverse
这个属性指明了如果项目超出了容器,项目的换行行为
默认情况下是
flex-wrap: nowrap;
也就是说默认不换行,项目超出会自动缩小,如下:
wrap
wrap-reverse
3 flex-flow
这不是一个具有独立特性的属性,它只是前面两个属性合并在一起的简写,也就是说:
flex-flow: <flex-direction> <flex-wrap>
例如:
flex-flow: row-reverse nowrap;
4 justify-content
它定义了项目在主轴上的对齐方式,这个属性应该很多人比较熟悉,因为很多同学使用它来居中对齐,但很多人可能无法枚举到底有多少个取值,请看如下:
justify-content: flex-start | flex-end | center | space-between | space-around
同样,我们用案例来说明:
默认情况下,取值为 flex-start
flex-end
center
space-between
space-around
5 align-items
这个属性跟 justify-content 类似,只不过是定义交叉轴上项目的对齐方式,取值范围如下:
align-items: flex-start | flex-end | center | baseline | stretch
默认情况下取值为 flex-start
flex-end
center
baseline
这张图跟 flex-start 比较像,为了明显一点,我把区别标出来,可以看到每个项目中的文本,都是根据某一条确定的基线对齐的
stretch
如果弹性项的垂直尺寸(cross size)属性(一般来说,就是高度)是auto,并且没有垂直外边距(cross-axis margin)是auto的,该弹性项被拉伸以适应容器高度, 其所使用的值是使项目的外边框(margin box)的垂直尺寸尽可能接近和行相同的尺寸,并依然遵循min-height/min-width/max-height/max-width属性的限制。
注意:如果弹性容器的高度被限制,该值可能会导致该项的内容溢出。
这里比较难以理解,简单的说,就是如果项目没有指定高度,没有指定上下margin,那么项目的高度会尽可能接近该项目主轴的行高
align-content
如果项目存在多个主轴,也就是说有多行,它定义了多行的主轴对齐方式。
对于容器中的子项目,可以设置如下几个属性:
order | flex-grow | flex-shrink | flex-basis | flex | align-self
1 order:
order 定义了项目在主轴上排列的优先级,对于同样的两个项目,item1 和 item2 的order 分别设为 2, 1,那么 item2 会在 item1之前展示:
order 数值越小,排列越靠前,但是,没有设置 order 的项目,会更优先展示,简单总结优先级如下:
没有设置 order > order 较小的 > order 较大的
2 flex-grow
这个属性规定了在空间有多余时,该项目相对于其他项目进行扩展的量,默认值为 0,表示不扩展。
如果有3个项目,分别设置为 1, 3, 1,那么中间项目在主轴上占据的宽度是另外两个项目的 3 倍
注意:上图的宽度并不是3倍,因为扩展量并不是宽度扩展,而是在对多余空间的扩展,原因是因为项目里面有文本节点,导致多余空间并不是整个容器的宽度
3 flex-shrink
这个元素和 flex-grow 正好相反,因此,表明在容器空间不足时,该项目相对于其他元素缩小的量,默认为 1
4 flex-basis
这个属性定义了元素在渲染时的基准,http://www.runoob.com/cssref/css3-pr-flex-basis.html
5 flex
这也是个没有实际意义的属性,它是 flex-grow flex-shrink flex-basis 的缩写 默认为 0 1 auto
6 align-self
如果某个元素不希望跟其他元素同流合污,它可以通过该属性定义自己在交叉轴上的对齐方式,
http://www.runoob.com/try/playit.php?f=playcss_align-self&preval=auto