容器属性：
1. flex-direction ：
row 表示子元素沿主轴从左到右排列
row-reverse 表示子元素沿主轴从右向左依次排列
column 表示子元素沿交叉轴从上到下排列
column-reverse 表示子元素沿交叉轴从下往上排列
2. flex-wrap：
wrap 换行
nowrap 不换行
wrap-reverse 表示置反换行的方向，比如按row 排列，wrap-reverse之后会沿着底部往上排列，按column之后，会沿着右边向左边排列
3. flex-flow：
row nowrap上面两个属性的复合属性
4. justify-content：水平方向（主轴）上的对齐方式
flex-start 可以看成所有的子元素是一整块移动的，flex-start是所有子元素整体贴父元素的左边
flex-end 可以看成所有的子元素是一整块移动的，flex-end是所有的子元素整体贴父元素的右边
center 一整块元素居中显示
space-around 每行第一个和最后一个子元素各贴父元素的左边框和右边框，中间的间隙除了子元素的宽度，平分
space-between 每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与父元素边框的间隔大一倍
5. align-items：垂直方向（交叉轴）上的对齐方式
flex-start 贴最上面
flex-end 贴最下面
center 中间对齐
baseline 第一行文本基线对齐
stretch 默认值，如果子元素没有设置高度，默认占满父元素的高度
6. align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch 轴线占满整个交叉轴
元素属性：
1. order： 值是一个数字，默认是0。决定了每一项元素的排列顺序，数值越小，位置越靠前
2. flex-grow： 定义元素的放大比例，默认是0。放大的是父元素除子元素的大小外的剩余空间
3. flex-shrink： 定义元素的缩小比例，默认是1。即如果空间不足，设置了该属性的项目缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
4. flex-basis：定义了在分配多余空间之前，默认值是auto，即项目本来的大小。设置了该属性的项目占据的主轴空间（可以看做是宽度）。浏览器根据这个属性，计算主轴是否有多余空间。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
5. flex：该属性是flex-grow、flex-shrink、flex-basis属性的简写（复合属性）。默认值是0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
6. align-self：它允许单个项目跟其他项目有不一样的对齐方式，可以覆盖align-items属性，默认值是auto，表示继承父亲的items属性，如果没有父元素，则等同于stretch（占满父元素的高）。
