Flex 语法揭秘：如何掌控弹性布局艺术

在布局的传统解决方案中，基于盒状模型，依赖 display 属性 + position属性 + float属性，这种方式对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局，内部的子元素将成为 Flex 项目，这些项目将在父容器中以灵活的方式布局。

浏览器兼容性

Flex 布局的浏览器兼容性还是比较好的，在所有的主流浏览器中都得到了支持，但要注意的是，IE9及以下版本不支持 Flex 布局。

flex-direction

该属性指定项目的排列方向，有四个值：

• row：项目从左到右排列，这是默认值。
• row-reverse：项目从右到左排列。
• column：项目从上到下排列。
• column-reverse：项目从下到上排列。

justify-content

该属性指定项目在主轴上的对齐方式，有六个值：

• flex-start：项目排列在主轴的开头。
• flex-end：项目排列在主轴的结尾。
• center：项目排列在主轴的中间。
• space-around：项目均匀分布在主轴上，两端的项目与边框的距离相等。
• space-between：项目均匀分布在主轴上，项目之间的间距相等。
• space-evenly：项目均匀分布在主轴上，项目之间的间距和项目与边框的距离相等。

align-items

该属性指定项目在交叉轴上的对齐方式，有七个值：

• stretch：项目拉伸以填充整个交叉轴。
• flex-start：项目排列在交叉轴的开头。
• flex-end：项目排列在交叉轴的结尾。
• center：项目排列在交叉轴的中间。
• baseline：项目排列在交叉轴的基线上。
• first baseline：项目排列在交叉轴的第一个基线上。
• last baseline：项目排列在交叉轴的最后一个基线上。

align-self

该属性指定单个项目在交叉轴上的对齐方式，有四个值：

• auto：使用 align-items 属性指定的对齐方式。
• stretch：项目拉伸以填充整个交叉轴。
• flex-start：项目排列在交叉轴的开头。
• flex-end：项目排列在交叉轴的结尾。
• center：项目排列在交叉轴的中间。
• baseline：项目排列在交叉轴的基线上。
• first baseline：项目排列在交叉轴的第一个基线上。
• last baseline：项目排列在交叉轴的最后一个基线上。

order

该属性指定项目的排列顺序，数值越大，排列顺序越靠后。

flex-grow

该属性指定项目在主轴上占用的剩余空间的比例。如果该值大于 0，则项目将占用剩余空间的一部分；如果该值为 0，则项目将不占用剩余空间；如果该值为负值，则项目将收缩以适应剩余空间。

flex-shrink

该属性指定项目在主轴上收缩的比例。如果该值大于 0，则项目将收缩以适应剩余空间；如果该值为 0，则项目将不收缩；如果该值为负值，则项目将拉伸以占据剩余空间。

flex-basis

该属性指定项目的初始尺寸，也就是在没有剩余空间分配之前，项目的尺寸。

flex-wrap

该属性指定项目是否在主轴上换行，有三个值：

• nowrap：项目不在主轴上换行。
• wrap：项目在主轴上换行。
• wrap-reverse：项目在主轴上反向换行。

align-content

该属性指定项目在交叉轴上排列的对齐方式，有七个值：

• stretch：项目拉伸以填充整个交叉轴。
• flex-start：项目排列在交叉轴的开头。
• flex-end：项目排列在交叉轴的结尾。
• center：项目排列在交叉轴的中间。
• space-around：项目均匀分布在交叉轴上，两端的项目与边框的距离相等。
• space-between：项目均匀分布在交叉轴上，项目之间的间距相等。
• space-evenly：项目均匀分布在交叉轴上，项目之间的间距和项目与边框的距离相等。