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