CSS3 引入了一种新的布局模式————弹性盒子。
引入弹性盒子的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
简介
弹性盒子由 弹性容器(Flex container) 和 弹性子元素(Flex item) 组成。弹性容器 通过设置 display 的值为 flex 或 flex-inline ，将其定义为 弹性容器 。弹性容器 内包含一个或多个 弹性子元素 。
弹性容器 外和 弹性子元素 内都是正常渲染，弹性盒子 只定义了 弹性子元素 如何在 弹性容器 内的布局。
Flex 即为 弹性布局。设置为 Flex 布局之后，子元素 的 float、clear 和 vertical-align 属性将失效。
接下来，介绍 Flex 常用的几个属性。
常用属性
flex-direction
flex-direction ：弹性子元素 在 弹性容器 内 水平方向 上的排列规则。
注意，这很重要：
flex-direction方向不同(row，column)，会导致其他6个 flex 属性(flex-wrap，felx-flow，justify-content，align-content，align-items，align-self)的方向也不同！！- 后面6个 flex 属性的例子中，
flex-direction都为row。 - 如果
flex-direction改成column，会导致方向与现在的例子相反。即水平xx的都会变成垂直xx，而垂直xx的会变成水平xx。
主要有以下几个值：row、row-reverse、column、column-reverse、initial、inherit 。
row
- 默认值 ；水平方向，从左往右正常排列。
row-reverse
- 水平方向，从右往左排列。
column
- 垂直方向，从上往下排列。
column-reverse
- 垂直方向，从下往上排列。
initial
- 设置改属性为它的默认值。
inherit
- 从父元素继承该属性。
flex-wrap
flex-wrap ：规定 弹性子元素 是一行还是多行显示在 弹性盒子 内。即 弹性子元素 是否换行。
主要有以下几个值：nowrap、wrap、wrap-reverse、initial、inherit 。
nowrap
- 默认值 ；
弹性子元素不换行，宽度会改变(压缩)。 
wrap
弹性子元素换行，宽度不会改变。
wrap-reverse
弹性子元素换行，宽度不会改变，且从右往左排序。
initial
- 设置该属性为它的默认值。
inherit
- 从父元素继承该属性。
flex-flow
flex-flow ：flex-direction 和 flex-wrap 的组合，第一个参数为 flex-direction ，第二个参数为 flex-wrap 。
row-reverse wrap
- 反向排序，且换行。
justify-content
justify-content ：弹性子元素 关于 弹性盒子 垂直轴，在水平方向上的分布规则。
主要有以下几个值：flex-start、flex-end、center、space-between、space-around、initial、inherit 。
flex-start
- 默认值 ；不拆分，紧贴
弹性容器的左边框。 
flex-end
- 不拆分，紧贴
弹性容器的右边框。 
center
- 不拆分，在
弹性容器内居中显示。 
space-between
- 拆分，分别紧贴
弹性容器的左、右边框，弹性子元素之间由 空白 分隔。 
space-around
- 拆分，每个
弹性子元素由宽度相同的 空白 围绕。所以弹性子元素到边框的距离是弹性子元素到弹性子元素距离到一半。 
initial
- 设置该属性为它的默认值。
inherit
- 从父元素继承该属性。
align-content
align-content ：弹性子元素 关于 弹性盒子 水平轴，在垂直方向上的分布规则。
提示： 使用该参数时必须同时使用 flex-wrap: wrap 或 flex-flow: xxx wrap (wrap-reverse 也可)。
主要有以下几个值：stretch、flex-start、flex-end、center、space-between、space-around、initial、inherit 。
stretch ：
- 默认值 ；拆分，
弹性子元素被拉伸以适应弹性容器。 
flex-start
- 不拆分，
弹性子元素紧贴弹性容器的上边框。 
flex-end
- 不拆分，
弹性子元素紧贴弹性容器的下边框。 
center
- 不拆分，在
弹性容器内居中显示。 
space-between
- 拆分，分别紧贴
弹性容器的上、下边框，弹性子元素之间由 空白 分隔。 
space-around
- 拆分，每个
弹性子元素由宽度相同的 空白 围绕。所以弹性子元素到边框的距离是弹性子元素到弹性子元素距离到一半。 
initial
- 设置该属性为它的默认值。
inherit
- 从父元素继承该属性。
align-items
align-items ：设置 弹性容器 内的 所有 的 弹性子元素 的对齐方式。
主要有以下几个值：stretch、flex-start、flex-end、center、baseline、initial、inherit
stretch
- 默认值 ；拉伸
弹性子元素以适应弹性容器。 
flex-start
弹性子元素向上对齐弹性容器。
flex-end
弹性子元素向下对齐弹性容器。
center
弹性子元素居中对齐弹性容器。
baseline
弹性子元素对齐弹性容器的基线(基本等效于flex-start)。
initial
- 设置该属性为它的默认值。
inherit
- 从父元素继承该属性。
align-self
align-items ：设置 弹性容器 内的 单个 弹性子元素 的对齐方式。
主要有以下几个值：auto、stretch、flex-start、flex-end、center、baseline、initial、inherit 。
auto
- 默认值 ；继承它的父容器 (
弹性容器) 的align-items属性，如果没有父容器则该值为stretch。 
stretch
- 拉伸
弹性子元素以适应弹性容器。 
flex-start
弹性子元素向上对齐弹性容器。
flex-end
弹性子元素向下对齐弹性容器。
center
弹性子元素居中对齐弹性容器。
baseline
弹性子元素对齐弹性容器的基线(基本等效于flex-start)。
initial
- 设置该属性为它的默认值。
inherit
- 从父元素继承该属性。