CSS flex布局学习笔记

flex简介

flex用于为容器内的子元素设置布局。当一个元素的display属性设置为flex或inline-flex时，这个元素成为flex容器，其子元素成为flex元素。为flex元素设置布局非常便捷。但要注意的是，flex元素的float、clear和vertical-align属性不再起作用。

flex容器

为了便于布局子元素，flex容器提供了两个轴用于对齐，分别称为主轴和交叉轴。主轴由flex-direction定义。flex-direction有4个可选值：row（默认值）、row-reverse、column、column-reverse，对应的主轴方向依次为水平向右（起点在左）、水平向左（起点在右）、垂直向下（起点在上）、垂直向上（起点在下）。在主轴方向上，子元素的布局方式由justify-content定义。justify-content有5个可选值：flex-start（默认值）、flex-end、center、space-between、space-around。其中flex-start表示首个子元素紧邻主轴起点排列。flex-end表示最后一个子元素紧邻主轴终点排列。center表示居中排列。space-between表示子元素两端对其，各子元素间间隔距离相等。space-around表示各子元素两边的间隔距离（或子元素和父元素边框的间隔距离）相等。

如果父元素的宽度无法容纳全部子元素，可以使用flex-wrap指定换行方式。flex-wrap可以取值nowrap（默认值）、wrap或wrap-reverse。nowrap表示不换行，因此多出的子元素不会显示。wrap表示换行，第一行在上方。wrap-reverse表示换行，第一行在下方。

和主轴垂直的直线是交叉轴。子元素在交叉轴上的对齐方式由align-items规定。align-items可以是flex-start（默认值）、flex-end、center、baseline和stretch。flex-start、flex-end、center这3个值的意义和在justify-content中类似。baseline表示按照子元素的首行文字基线对其。stretch表示在子元素没有设置高度时，将子元素高度拉伸至充满父元素。

当主轴方向上发生换行时，在交叉轴方向上会产生多行子元素。这些行之间的排序方式，由align-content规定。align-content的可选值有flex-start（默认值）、flex-end、center、space-between、space-around、stretch。这些值的意义，同之前描述的类似。

除了上述的5个属性，CSS为flex容器提供了缩写语法flex: <flex-direction> || <flex-wrap>。

flex元素

flex容器规定了全部子元素的布局方式。如果某个子元素需要单独的布局方式，也可以使用flex属性。子元素可以使用的flex属性有order、align-self、flex-grow、flex-shrink、flex-basis，以及缩写flex。在主轴方向上，可以使用order调整元素位置。order（默认值为0）越小的元素越靠近主轴起点。在交叉轴方向上，可以使用align-self覆盖容器的align-items属性。align-self的可选值同容器的align-items属性一样。

如果容器在主轴方向上有剩余空间，可以通过flex-grow属性设定子元素的放大比例。当flex-grow为0时，子元素不会放大。类似的，可以通过flex-shrink为子元素设置缩小比例。和这两个属性相关的还有flex-basis。在计算主轴方向上是否有剩余空间时，子元素的flex-basis值被认为是子元素占用的大小。flex-basis默认值是auto，表示子元素的宽度或高度（根据主轴方向决定）。

CSS为flex元素提供了缩写flex，语法是flex: none || <flex-grow> || <flex-shrink> || <flex-basis>。

兼容性

对于webkit内核的容器，需要为flex增加-webkit-前缀。

参考资料

《Flex布局教程：语法篇》 阮一飞 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

《Flex布局教程：实例篇》 阮一飞 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

修订记录

2016年02月22日 编写文档。

2018年11月23日 改写为rst格式。