display: flex
属性包括：
（1）flex-direction：
row(默认值)：主轴在水平方向，起点在左侧，也就是我们常见的从左到右；
row-reverser：主轴在水平方向，起点在右侧；
column：主轴在垂直方向，起点在上沿；
column-reverse：主轴在垂直方向，起点在下沿。
（2）flex-wrap：
nowrap(默认)：不换行;
wrap：换行第一行在上边；
wrap-reverse：换行第一行在下边。
（3）flex-flow：
flex-flow 是 flex-direction 和 flex-wrap 的简写，默认值是 row no-wrap。
（4）justify-content：
justify-content定义了项目在主轴上的对齐方式
flex-start(默认)：与主轴的起点对齐；
flex-end：与主轴的终点对齐；
center：居中；
space-between：两端对齐，项目之间的距离都相等；
space-around：每个项目的两侧间隔相等，所以项目与项目之间的间隔是项目与边框之间间隔的两倍。
（5）align-items：
align-items 定义了项目在交叉轴上如何对齐。
flex-start：与交叉轴的起点对齐；
flex-end：与交叉轴的终点对齐；
center：中间对齐；
baseline：项目第一行文字的基线对齐；
stretch(默认值)：如果项目未设置高度或者为 auto，项目将占满整个容器的高度。
（6）align-content：
align-content 定义了多根轴线的对齐方式，若此时主轴在水平方向，交叉轴在垂直方向，align-content 就可以理解为多行在垂直方向的对齐方式。项目排列只有一行时，该属性不起作用。
项目属性：
（1）order：
order 定义了项目的排列顺序，默认值为 0，数值越小，排列越靠前。
（2）flex-grow：
flex-grow 定义了项目的放大比例，默认为 0，也就是即使存在剩余空间，也不会放大。
（3）flex-shrink：
flex-shrink 定义了项目的缩小比例，默认为 1，即当空间不足时，项目会自动缩小。
（4）flex-basis：
flex-basis 定义了在分配多余的空间之前，项目占据的主轴空间，默认值为 auto，即项目原来的大小。浏览器会根据这个属性来计算主轴是否有多余的空间。