Flex布局 弹性布局
一、任何一个容器都可以指定为 Flex 布局：
display: flex;//块元素
display: inline-flex;//行内元素
1、flex-direction：项目的排列方向
flex-direction: row || row-reverse || column || column-reverse
2、flex-wrap：如果一条轴线排不下，如何换行
flex-wrap: nowrap || wrap || wrap-reverse
3、flex-flow: flex-direction flex-wrap
4、justify-content：项目在主轴上的对齐方式
justify-content: flex-start || center || flex-end || space-between || space-around || space-evenly
5、align-items：项目在交叉轴上如何对齐
align-items: flex-start || center || flex-end || baseline || stretch
6、align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
align-content: flex-start || center || flex-end || space-between || space-around
二、Flex Items项目
1、order：项目的排列顺序。数值越小，排列越靠前，默认为0
2、flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3、flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4、flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）
5、flex: flex-grow flex-shrink flex-basis
6、align-self: auto || flex-start || center || flex-end || stretch || baseline