设置
display:flex/inline-flex
区别 flex会换行，inline-flex不会换行
容器属性
1 flex-direction
主轴方向 取值 row row-reverse column column-reverse
以下假设主轴是x
2 flex-wrap
换行规则 取值 nowrap wrap wrap-reverse
3 flex-flow
前两个的简写
4 justify-content(左右)
一行内元素主轴的对齐规则 取值 flex-start flex-end center space-between space-around
5 align-item（上下）
元素在交叉轴的对齐规则 取值 flex-start flex-end center baseline stretch
当项目高度为auto时，默认为strech 会占满一个主轴上下
6 align-content
多根轴线时行与行的分布 取值 flex-start | flex-end | center | space-between | space-around | stretch
项目的属性
1 order
默认为0，表示项目的顺序 数字越小越靠前
2 flex-grow
默认值为0 表示当主轴空间有剩余时，值为1而其他的为0，该元素会增大占满剩余空间
3 flex-shrink
默认值为1 表示主轴空间不够，而且不换行时，为0的项目不会缩小，其他为1的缩小
4 flex-basis
默认值为auto 表示项目占据的主轴空间 auto时就是项目原来的大小
5 flex
以上的简写 flex-grow, flex-shrink 和 flex-basis
6 align-self
默认值为auto,表示继承父元素的align-item属性 取值auto | flex-start | flex-end | center | baseline | stretch
表示一个元素自己的上下对齐方式
注意
多行主轴时会平均分配主轴的高度
设置为flex后，子元素的float、clear和vertical-align属性将失效。
