CSS3 之 flex 布局

前端开发中的一个痛点，就是到底如何布局？

在 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