flex 布局

flex 布局
display: flex;

flex-direction 布局方向
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 设置元素换行
nowrap 不换行
wrap 换行
wrap-reverse 逆向换行

justify-content 元素在主轴上的对齐方式
设置元素在主轴上的对齐方式
flex-start (默认)左对齐
flex-end 右对齐
center 居中对齐
space-between 两端对齐，元素之间平均等分剩余空白间隙部分
space-around 元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1：2

align-items 元素在交叉轴的对齐方式
设置容器元素在交叉轴上的对齐方式
stretch （默认）当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
flex-start 在交叉轴上向起点位置（向上/向左）对齐
flex-end 在交叉轴上向结束位置（向下/向右）对齐
center 剧中对齐
baseline 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start： 与交叉轴的起点对齐。
flex-end： 与交叉轴的终点对齐。
center： 与交叉轴的中点对齐。
space-between： 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around： 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

Order : 用于设置flex容器内部的每个元素的排序顺序，默认是0
排序规则，由小到大

flex-grow ： 用于设置元素的放大比例，默认为 0
如果未0，则不放大 （前提是有剩余空间）

flex-shrink： 用于设置元素的缩小比例，默认为 1
设置未 0 的不进行缩放 负数无效 （前提是空间不足）

flex-basis：自由缩放
align-self： 重写元素在交叉轴上的对齐方式
auto: 默认，表示继承父级元素的align-item 属性
stretch （默认）当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
flex-start 在交叉轴上向起点位置（向上/向左）对齐
flex-end 在交叉轴上向结束位置（向下/向右）对齐
center 剧中对齐
baseline 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）

参考：阮一峰 Flex 布局教程