父属性
flex-dirction: 主轴方向<br>
row/row-reverse & column/column-reverse<br>
justify-content: 主轴元素排列方式<br>
flex-start: 默认值, 头部开始<br>flex-end: 尾部开始<br>center: 居中<br>space-around: 平分空间(item左右间隙相等)<br>space-between: 两边贴边, 剩余平分<br>
flex-wrap: 子元素是否换行<br>
默认子元素不换行, 分摊一行面具<br>设置wrap后, 自动换行<br>
align-content: 侧轴元素排列方式(多行)<br>
适用于子元素有换行的情况下, 单行无效<br><br>flex-start: 默认值, 头部开始<br>flex-end: 尾部开始<br>center: 居中<br>space-around: 平分空间(item左右间隙相等)<br>space-between: 两边贴边, 剩余平分<br>stretch: 子元素高度平分父元素高度<br>
align-items: 侧轴元素排列方式(单行)<br>
flex-start: 默认值, 头部开始<br>flex-end: 尾部开始<br>center: 居中<br>streth: 伸缩, 子元素没有height的话, 侧轴拉满<br>
flex-flow: flex-direction + flex-wrap<br>
原理
父盒子flex, 子元素的float, clear, vertical-align属性都失效<br><br>
父成为容器, 子元素都为容器成员(item)
子属性
flex: 1, 权重<br>
align-self: 控制子项自己在侧轴的对齐方式<br>
order: 默认0, 数值越小排的越靠前<br>
