1、基本概念
1）Flex布局元素称为Flex 容器，子元素称为Flex项目；
2）容器存在两根轴：主轴main axis(默认是水平方向)和交叉轴cross axis(默认是垂直方向)；
3）任何一个容器都可以指定为flex布局：
- 块元素：display：flex；
- 行内元素：display:inline-flex；
2、容器属性
1）flex-direction
作用：项目在主轴上的排列方向
取值：row(默认值) row-reverse column column-reverse
2）flex-wrap
作用：容器空间不够时，是否允许项目换行
取值：nowrap(默认值) wrap wrap-reverse
3）justify-content
作用：项目在主轴上的对齐方式
取值：flex-start(默认值) flex-end center space-between space-around
4）align-items
作用：项目在交叉轴上的对齐方式
取值：flex-start flex-end center stretch(默认值) baseline
5）align-content
作用：有多根轴线时，在交叉轴上的对齐方式（因此只有当flex-wrap：wrap wrap-reverse才生效）
取值：flex-start flex-end center space-between space-around stretch（默认值）
6) flex-flow
flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写，默认值为row nowrap。
3、项目属性
1）flex-grow
作用：项目的放大比例，默认值为0，即容器存在剩余空间也不放大
2) flex-shrink
作用：项目的缩小比例，默认值为1，即容器空间不足时项目将缩小
3) flex-basis (这里约定主轴方向为row)
作用：content –> width –> flex-basis (limted by max|min-width)
http://gedd.ski/post/the-diff...
4）flex
作用：flex-grow flex-shrink和flex-basis的简写
flex：1 （等分布局）
https://developer.mozilla.org...
5)order
作用：定义了项目在容器中的排列顺序，数值越小，排列越靠前，默认值为0，在html中即使-2，-1的item排在后面，但是由于设置了order，使之排在了前面
6）align-self
作用：允许单个项目有与其他项目在交叉轴上不一样的对齐方式，优先级高于align-content
取值：auto（默认值）flex-start flex-end center baseline stretch
4、实战演练
1）等分布局：所有子项目flex：1
2）水平垂直居中：容器的justify-content和align-items属性设置为center
参考链接：
http://gedd.ski/post/the-diff...
https://developer.mozilla.org...