flex布局

1、基本概念
1）Flex布局元素称为Flex 容器，子元素称为Flex项目；
2）容器存在两根轴：主轴main axis(默认是水平方向)和交叉轴cross axis(默认是垂直方向)；
3）任何一个容器都可以指定为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...