flex 布局的使用

网页传统的布局方式依赖“display”、“position”、“float”属性，对于垂直居中、容器大小分配就会显得很不方便。Flex 就很好的解决这些问题，实现响应式的页面布局。对于Flex 的钟爱，记载可能是为了下一次理解 与 回忆 。

容器的属性：

.box{    display: flex;    flex-direction: row | row-reverse | column | column-reverse;    flex-wrap: nowrap | wrap | wrap-reverse;    flex-flow: <flex-direction> || <flex-wrap>;    justify-content: flex-start | flex-end | center | space-between | space-around;    align-items: flex-start | flex-end | center | baseline | stretch;}

• flex-direction：属性决定主轴的方向（即项目的排列的方向）。

• flex-wrap：规定容器内元素排不下如何换行。

• flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

• justify-content：属性规定容器元素在 主抽的对齐方式（即X轴为基准方向）

• align-items：属性规定容器元素在 交叉轴的对齐方式（即Y轴为基准的方向）

• align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线（容器元素不换行），该属性不起作用。

容器内元素的属性

.flex-box{    order: <integer>;     flex-grow: <number>; /* default 0 */     flex-shrink: <number>; /* default 1 */     flex-basis: <length> | auto; /* default auto */     align-self: auto | flex-start | flex-end | center | baseline | stretch;}

• order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

• flex-grow：容器元素的放大比例，默认0

• flex-shrink：容器元素的缩小比例，默认1

• flex-basis:元素分配对于空间之前，规定主轴空间的大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

• flex： flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

• align-self：允许单个容器元素与其他容器元素 不一样的的对齐方式，继承align-items 属性。

更多博士文献请参考：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html