flex布局

常见父项属性：

flex-direction	设置主轴的方向	row-----默认值从左到右； row-reverse-----从右到左 column-----从上到下 column-reverse-----从下到上
justify-content	设置主轴上的子元素排列方式	flex-start-----默认值从头部开始 flex-end-----从尾部开始 center-----在主轴居中对齐 space-around-----平分剩余空间 space-between-----先两边贴边再平分剩余空间
flex-wrap	设置子元素是否换行	nowrap-----默认值，不换行 wrap-----换行
align-content	设置侧轴上的子元素的排列方式(多行)	flex-start-----默认值在侧轴的头部开始排列 flex-end-----在侧轴的尾部开始排列 center-----在侧轴中间显示 space-around-----子项在侧轴平分剩余空间 space-between-----子项在侧轴先分布在两头，再平分剩余空间 stretch-----设置子项元素高度平分父元素高度
align-items	设置侧轴上的子元素的排列方式(单行)	flex-start-----从上到下 flex-end-----从下到上 center-----挤在一起居中(垂直居中) stretch-----拉伸
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

常见子项属性：

flex	子项目占的份数(可以是百分比)
align-self	控制子项自己在侧轴的排列方式
order	属性定义子项的排列顺序(前后顺序)