弹性盒布局

1、参考资料：

https://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/

http://www.runoob.com/w3cnote/flex-grammar.html

2、flex基本布局

弹性盒布局的容器，使用"display: flex"声明使用弹性盒布局
flex-direction用来确定主轴的方向
flex-wrap属性的含义：是否占一行
flex-flow"属性把"flex-direction"和"flex-wrap"结合起来

3、容器中条目的顺序：order属性

4、条目尺寸的弹性："flex"可以同时声明"flex-basis"、"flex-grow"和"flex-shrink"的值

"flex-basis"属性：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，即 width 或 height 属性的值。如果主轴尺寸属性的值也是 auto，则使用的值由条目内容的尺寸来确定。

"flex-grow"属性：值是一个没有单位的非负数，默认值是 1。"flex-grow"属性的值表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例。

比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3，那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占全部空间的 1/6、1/3 和 1/2，如代码清单 5所示。预览的页面见这里。
"flex-shrink"属性：在使用上类似于"flex-grow"。该属性的值也是无单位的，表示的是当容器的空间不足时，各个条目的尺寸缩小的比例。在进行尺寸缩小时，条目的缩小比例与"flex-basis"的值相乘之后，就得到了应该缩小的尺寸的实际值。

例如，在容器中有 3 个条目，其"flex-shrink"属性的值分别为 1，2 和 3。每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时，比如变成了 540px 之后， 则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。3 个条目分别要缩小 10px、20px 和 30px，主轴尺寸分别变为 190px、180px 和 170px。

5、条目对齐：
（1）第一种方式是使用自动空白边，即"margin: auto"。在使用自动空白边时，容器中额外的空白空间会被声明为 auto 的空白边占据
（2）第二种方式是在主轴方向上的对齐。这是通过容器上的"justify-content"属性来进行设置，可以调整条目在主轴方向上的对齐方式

（3）第三种方式是交叉轴方向上的对齐。除了在主轴方向上对齐之外，条目也可以在交叉轴方向上对齐。容器上的属性"align-items"用来设置容器中所有条目在交叉轴上的默认对齐方向，而条目上的属性"align-self"用来覆写容器指定的对齐方式。


6、交叉轴空白处理
属性“align-content”的可选值和含义，align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

7、浏览器的支持