一、伸缩布局
1. align-items
调整侧轴方向对齐方式，包括flex-start、flex-end、center、baseline（不管行高是多少，文字基线自动调整至相同 ）、stretch（height：auto）
2. flex-wrap
控制是否换行，包括wrap、nowrap（和宽度无关，自动伸缩）
3. justify-content
主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-around、space-between几种方式
4. flex-direction
调整主侧轴的方向。row-reverse、column、row、column-reverse
5. align-content
堆栈排列，主要是应用flex-wrap: wrap产生的换行进行控制
包括flex-start、flex-end、center、space-between、space-around、stretch
6. flex-flow
flex-direction和flex-wrap的简写形式
flex-flow：column wrap
7. flex
控制子元素伸缩比例，分配的是父盒子剩余的空间
8. align-self
同align-items可覆盖父元素设置的algin-items，
包括flex-start、flex-end、center、baseline、stretch
9. order
控制子元素的顺序（按大小）
