CSS3--伸缩布局 Flexbox

display：flex | inline-flex

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子有Flex container（弹性容器）和Flex item（弹性子元素）组成

flex-direction：指定了弹性子元素在父容器中的位置

row | row-reverse | column | column-reverse

justify-content 内容对齐属性，将弹性项沿着弹性容器的主轴线（main axis）对其

语法：justify-content：flex-start|flex-end|center|space-between|space-around

align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

语法：align-items:flex-start|flex-end|center|baseline|stretch

flex-wrap：指定弹性盒子的子元素换行方式。

                    nowrap：默认。弹性容器为单行，弹性子项可能会溢出容器。

                    wrap：弹性容器为多行。弹性子项溢出的部分会被放置到新行，子项内部会发生断行

                    wrap-reverse：反转wrap排列

align-content：用于修改flex-wrap属性的行为。类似于align-items，但不是设置弹性子元素的对其，而是设置各个行的对齐

语法：align-content：flex-start|flex-end|center|space-between|space|around|stretch

完美居中：使用弹性盒子，只要设置 margin：auto，就可以是弹性子元素在两上轴方向完全居中