flex布局常用代码

常用属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction：设置主轴的方向。

它可能有4个值：

row: （默认值）主轴为水平方向，起点在左端，从左至右排列；

row-reverse：主轴为水平方向，起点在右端，从右至左排列；

column：主轴为垂直方向，起点在上沿，从上至下排列；

column-reverse：主轴为垂直方向，起点在下沿，从下至上排列。

flex-wrap： 控制项目(子元素)是否换行。
它可能取3个值：

• nowrap：（默认值）不换行；

• wrap：换行，第一行在上方；

• wrap-reverse：换行，第一行在下方。

justify-content：设置主轴上的子元素对齐方式。

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右：

flex-start：（默认值），左对齐（沿着主轴开始位置至末尾位置对齐）；

flex-end：右对齐（沿着主轴末尾位置至开始位置对齐）；

center：居中对齐；

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；

space-between: 两端对齐，项目之间的间隔都相等。

align-items：定义项目在交叉轴上如何对齐。

注意：align-items适用于项目在一行中，不适用于换行。

它可能取5个值，具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：

flex-start：交叉轴的起点对齐；

flex-end：交叉轴的终点对齐；

center：交叉轴的中点对齐(可以理解为垂直居中)；

baseline：项目的第一行文字的基线对齐；

stretch：(默认值)，如果项目未设置高度或设为auto，将占满整个容器的高度。