Flex容器属性
flex容器定义
在父元素中使用 display: flex;
flex-direction 操纵主轴的方向。
row(缺省)表示从左向右排列
row-reverse表示从右向左排列
column表示从上向下排列
column-reverse表示从下向上排列
flex-wrap 控制换行
nowrap(缺省)：所有Flex项目单行排列
wrap：所有Flex项目多行排列，按从上到下的顺序
wrap-reverse：所有Flex项目多行排列，按从下到上的顺序
flex-flow合写 操纵主轴 和 控制换行
默认值为
row nowrap
justify-content 主轴对齐方式
flex-start(缺省)：从启点线开始顺序排列
flex-end：相对终点线顺序排列
center：居中排列
space-between：项目均匀分布，第一项在启点线，最后一项在终点线
space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和
space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等
align-items 侧轴单行对齐方式
同行项目间对齐方式
stretch(缺省)：交叉轴方向拉伸显示
flex-start：项目按交叉轴起点线对齐
flex-end：项目按交叉轴终点线对齐
center：交叉轴方向项目中间对齐
baseline：交叉轴方向按第一行文字基线对齐
align-content 侧轴多行对齐方式
stretch(缺省)：拉伸显示
flex-start：从启点线开始顺序排列
flex-end：相对终点线顺序排列
center：居中排列
space-between：项目均匀分布，第一项在启点线，最后一项在终点线
space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和
Flex项目属性
order项目排列方式
按order值从小到大顺序排列，可以为负值，缺省为0。
flex-grow所占份额
flex-grow属性定义项目的放大比例，flex-grow 值是一个单位的正整数，表示放大的比例。
默认为0，即如果存在额外空间，也不放大，负值无效。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink控制缩放
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
0表示不缩小，负值无效。
flex-basis项目缺省尺寸
flex-basis属性定义项目在分配额外空间之前的缺省尺寸。
属性值可以是长度（20%，10rem等）或者关键字auto。它的默认值为auto，即项目的本来大小。
flex
flex属性是flex-grow, flex-shrink 和flex-basis的简写。
默认值为0 1 auto，后两个是可选属性。
align-self单独设置项目对齐方式
align-self属性定义项目的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
