Flex布局

父项属性

• flex-direction：设置主轴方向（row默认横轴，row-reverse,column,column-reverse）
• justify-content：设置主轴元素排列方式（flex-start默认，从头开始，flex-end，从后开始，center 在主轴居中对齐，space-around 平分剩余空间，space-between ，两边贴住再平分）
• flex-warp：设置子元素是否换行（默认不换行 nowrap 换行 wrap）
• align-content：设置侧轴上子元素的排列方式（多行）（flex-start默认，从头开始，flex-end，从后开始，center 在侧轴居中对齐，space-around 平分剩余空间，space-between ，两边贴住再平分，stretch，拉伸）
• align-items : 设置侧轴上子元素的排列方式（单行）（stretch 默认，拉伸，flex-start从头开始，flex-end，从后开始，center 在主轴居中对齐）
• flex-flow：符合属性 等于设置flex-direction和flex-wrap 前后关系注意下

子项属性

• flex 属性 ：表示占几份 写法： flex: //default：0； flex ：1 =》flex：1 1 0
• align-self 控制子项自己在侧轴的排列方式 默认 auto 继承父元素
• order 定义项目排列顺序 数值越小越靠前 默认 0