display: flex
display:-webkit-flex (兼容写法)
父容器的属性
flex-direction: row | row-reverse | column | column-reverse 定义子元素在主轴的排列方向
row从左到右(默认值)
row-reverse 从右到左
column从上到下
column-reverse从下到上
flex-wrap : wrap | nowrap | wrap-reverse 子元素的换行
wrap如果子元素宽度超出则往下换行
nowrap不换行(默认值),此时如果子元素设置了宽度则不会生效
wrap-reverse 如果子元素宽度超出则往上换行
flex-flow: flex-direction flex-wrap
以上两个属性的组合写法
justify-content: flex-start | flex-end | center | space-between | space-around 伸缩项在主轴的对齐方式
flex-start 主轴的起点对齐
flex-end 主轴的终点对齐
center 主轴居中对齐
space-between 两端对齐中间的空间平分
space-around 伸缩项之间的空间平均分配
align-content: flex-start | flex-end | center | space-between | space-around | stretch 多行伸缩项在交叉轴的对齐方式, 经过测试,flex-direction为column的无效,要row且换行的才有效
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴居中对齐
space-between 上下两端对齐中间的空间平分
space-around 伸缩项之间的空间平均分配
stretch 拉伸对齐,每行都拉伸填满后对齐
align-items: flex-start | flex-end | center | baseline | stretch
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴居中对齐
baseline 基于内容的基线对齐
stretch 拉伸对齐 (默认)
align-items 与 align-content的区别
1、align-items对单行多行的都有效，align-content只对flex-direction为水平flex-wrap为换行的多行伸缩项有效；
2、当值为flex-start、flex-end、center时align-items项目之间平分剩余空间，align-content项目之间没有空间；
伸缩项的属性
order： 0（默认） | 任何数字 子项在父元素中出现的顺序
flex-grow: 0 (默认) | 任何数字不能为负数 除内容以外的剩余空间按照flex-grow的值占flex-grow总值的百分比来分配
flex-shrink: 1 (默认) | 何数字不能为负数 剩余空间不足时的压缩比率，数字大的压缩的厉害，设置为0时不压缩
flex-basis: auto（默认） | width | 0 计算前刨去的空间
伸缩项分配空间 = 伸缩容器的空间 - basis设置的空间 - 其他子元素的width（若没有则为其他内容占的空间）
flex: flex-grow flex-shrink flex-basis 是以上三个的简写
flex: 1 0 auto | none | 0 （默认）
设置为none 相当于 flex：0 0 auto
设置为0 很少用
只设置第一个值其他两个不写 flex: 1 相当于 flex : 1 1 0
align-self: 每个伸缩项重置父容器设置的align-items