目录
一、什么是flex布局？
二、其属性有哪些？
一、什么是flex布局？
flex是 flexible box 的缩写，就是弹性布局的意思；
任何一个元素（块元素、行内块元素、行内元素），都可以设置为弹性盒子属性。
语法：块元素： display:flex; 行内元素：display:inline-flex。
注意：webkit 内核的浏览器，须要加上 -webkit 前缀，且设置为flex 布局后，子元素 的 clear（清除浮动）、float（浮动）和vertical-align（垂直对齐方式）属性将失效；
二、其属性有哪些？
flex-direction【排列方向】：flex-direction: row | row-reverse | column | column-reverse
flex-wrap【是否换行】：flex-wrap: nowrap | wrap | wrap-reverse
flex-flow【上述两个组合】：
flex-flow: flex-direction, flex-wrap
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content【在主轴上的对齐方式（横向）】：
justify-content: flex-start | flex-end | center | space-between | space-around
align-items【在交叉轴上如何对齐（纵向）】：
align-items: flex-start | flex-end | center | baseline | stretch
flex-grow【放大比例，默认为0，即如果存在剩余空间，也不放大】，flex-grow: 默认为0
flex-shrink【缩小比例，默认为1，即如果空间不足，则缩小】，flex-shrink: 默认为1
flex-basis【在分配多余空间之前，项目占据的主轴空间】，flex-basis: | auto
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex: auto;（1 1 auto） flex: none; （0 0 auto）
