Flex 布局属性总结

采用 Flex 布局的元素，被称为 Flex 容器(flex container)，简称“容器”。其所 有子元素自动成为容器成员，成为 Flex 项目(Flex item)，简称“项目”。

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

main start/main end：主轴开始位置/结束位置；

cross start/cross end：交叉轴开始位置/结束位置；

main size/cross size：单个项目占据主轴/交叉轴的空间；

开启Flex布局只需要在父容器设置display:flex即可

Flex布局父容器属性：设置在容器上的属性有6种

flex-direction / flex-wrap  /  flex-flow  /  justify-content align-items  /  align-content

1、flex-direction 属性：决定主轴的方向（即项目的排列方向）

flex-direction ：row  |  row-reverse  |  column  |  column-reverse;

row（默认）：主轴水平方向，起点在左端； 从左1/2/3/.....

row-reverse：主轴水平方向，起点在右端； 从右1/2/3/.....

column：主轴垂直方向，起点在上边沿； 从上1/2/3/... 

column-reverse：主轴垂直方向，起点在下边沿。从下1/2/3/... 

 

2、flex-wrap属性：定义换行情况

flex-wrap：nowrap  |  wrap  |  wrap-reverse

默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。

nowrap（默认）：不换行；

wrap：换行，第一行在上方；(向下换)

wrap-reverse：换行，第一行在下方。(向上换)

3、flex-flow 属性：是flex-direction 和 flex-wrap 的简写，默认（row ）（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属性：定义在交叉轴上的对齐方式

align-items：flex-start  |  flex-end  |  center  |  baseline  |  stretch;

flex-start：上对齐 (起点对齐)。

flex-end：下对齐 (终点对齐)。

center：交叉轴对齐 (中点对齐)。

baseline: 第一行文字的基线对齐 (项目的第一行文字的基线对齐；)。

stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器。

6、align-content属性：定义多根轴线的对齐方式

align-content：flex-start | flex-end | center | space-between | space-around  |  stretch;

如果项目只有一根轴线，该属性不起作用。 所以，容器必须设置flex-wrap：···；

flex-start：上对齐 （与交叉轴的起点对齐）。

flex-end：下对齐  （与交叉轴的终点对齐）。

center：居中对齐 （与交叉轴的中点对齐）。

stretch（默认值）：轴线占满整个交叉轴 。

space-between：两端对齐，间隔平均 （与交叉轴的两端对齐，轴线之间的间 隔平均分布）。      

space-around：间隔相等 （每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍）。

Flex布局子元素属性：设置在项目上的属性也有6个

Order  /  flex-grow  /  flex-shrink  /  flex-basis  /  flex/align-self

1. Order 属性（num）

order定义自身排列顺序，数值越小，越靠前，默认为0。-1/0/1/2/3/...

• flex-grow属性（num）

flex-grow 定义自身放大比例，默认为0不放大。例如：1/2/1=25%:50%:25%

3、flex-shrink属性（num）

flex-shrink定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小。

４、flex-basis属性

flex-basis定义最小空间，默认值为auto，即自身的本来大小。

５、flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

６、align-self属性

align-self定义自身对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。