CSS中的flex布局

使用flex布局之后，容器（父类盒子）可以使用的六种属性：

flex-direction：

决定主轴的方向，即项目排列的方向;

row（默认值）：主轴为水平方向，起点在左端;

row-reverse：主轴为水平方向，起点在右端;

column：主轴为垂直方向，起点在上沿;

column-reverse：主轴为垂直方向，起点在下沿；

flex-wrap：

在一行排不下的情况下，决定如何进行换行；

nowrap（默认）：不换行;

wrap：换行，第一行在上方;

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

flex-flow：

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content：

设置轴对齐的方式；

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

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

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

align-items：（适用于单行的情况下）

设置项目在交叉轴上如何对齐；

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

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

center：交叉轴的中点对齐。

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

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

align-content：（适用于多行（换行）的情况下）

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：从侧轴头部开始排列。

flex-end：从侧轴尾部开始排列。

center：在侧轴中间显示。

space-between：先在侧轴两头分布，再平分剩余空间。

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

stretch（默认值）：设置子项元素高度平分父元素高度。

其子项（子元素）对应拥有的属性：

order数值越小，排列越靠前，默认数值为0；

flex-grow数值代表的为放大的比例，默认为0，即不放大；

flex-shrink数值代表了项目的缩小比例，默认值为零，如果空间不足，该项目就会被缩小；

flex-basis定义了分配多余空间之前，项目所占据的主轴空间，浏览器需要计算主轴是否还有空间，默认值为auto，即项目原本的大小；

flex是放大，缩小和占用空间统一设置属性，在实现等比例分割的时候会产生；

align-self设置自己与其他项目不同的对齐方式，默认值为auto；