Flex快速总结

Flex是一款易用高效的布局模型，自问世以来已成为前端布局的基石。想使用Flex快速布局，只需了解下面六个核心属性即可。

1. flex-direction：决定主轴的方向

flex-direction 属性决定了Flex布局的轴线方向。它支持以下值：

• row：主轴为水平方向，起点在左侧，终点在右侧。
• row-reverse：主轴为水平方向，起点在右侧，终点在左侧。
• column：主轴为垂直方向，起点在顶部，终点在底部。
• column-reverse：主轴为垂直方向，起点在底部，终点在顶部。

2. flex-wrap：一条轴线排不下时如何换行

flex-wrap 属性决定了当子元素在轴线上排不下时如何换行。它支持以下值：

• nowrap：不换行。
• wrap：换行。
• wrap-reverse：换行，但换行方向与正常换行相反。

3. flex-flow：是 flex-direction 和 flex-wrap 属性的简写形式

flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写形式。它允许一次性设置轴线方向和换行方式。例如：

.container {
  flex-flow: row wrap;
}

这相当于同时设置了 flex-direction: row; 和 flex-wrap: wrap;。

4. justify-content：决定子元素在主轴上的对齐方式

justify-content 属性决定了子元素在主轴上的对齐方式。它支持以下值：

• flex-start：子元素对齐在主轴的起点。
• flex-end：子元素对齐在主轴的终点。
• center：子元素对齐在主轴的中心。
• space-between：子元素均匀分布在主轴上，两端会有空白。
• space-around：子元素均匀分布在主轴上，每个子元素两侧都有空白。

5. align-items：决定子元素在侧轴上的对齐方式

align-items 属性决定了子元素在侧轴上的对齐方式。它支持以下值：

• flex-start：子元素对齐在侧轴的起点。
• flex-end：子元素对齐在侧轴的终点。
• center：子元素对齐在侧轴的中心。
• stretch：子元素拉伸以填充侧轴。

6. align-content：决定子元素在侧轴上的分布方式

align-content 属性决定了子元素在侧轴上的分布方式。它支持以下值：

• flex-start：子元素对齐在侧轴的起点。
• flex-end：子元素对齐在侧轴的终点。
• center：子元素对齐在侧轴的中心。
• space-between：子元素均匀分布在侧轴上，两端会有空白。
• space-around：子元素均匀分布在侧轴上，每个子元素两侧都有空白。

掌握了这六个核心属性，你就能轻松使用Flex进行页面布局。赶紧动手实践一下吧！