一，基本概念
图中是一个 flex-direction 属性为 row 的弹性容器，意味着其内的弹性项目将根据既定书写模式 (writing-mode) 沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。
1，弹性容器 (Flex container)
包含着弹性项目的父元素。
通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
1 | .flex-container { |
2，弹性项目 (Flex item)
弹性容器的每个子元素都成为弹性项目。
弹性容器直接包含的文本将包覆成匿名弹性项目。
3，轴 (Axes)
每个弹性框布局包含两个轴。
弹性项目沿其依次排列的那根轴称为主轴 (main axis)。
垂直于主轴的那根轴称为侧轴 (cross axis)。
4，方位 (Direction)
弹性容器的各个边（主轴起点 (main start)，主轴终点 (main end)，侧轴起点 (cross start)，侧轴终点 (cross end)）描述了弹性条目流的起点与终点。
它们具体取决于弹性容器的主轴与侧轴以及由 writing-mode 确立的方向（从左到右、从右到左，等等）。
5，行 (Line)
根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
6，尺寸（Dimension）
根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸 (main size)与 侧轴尺寸 (cross size)。
二，例外的属性
1，多栏布局模块的 column-* 属性对弹性项目无效。
2，clear 属性对弹性项目无效。
3，使用 float 属性将使元素的 display 属性值为 block。
4，vertical-align 属性对弹性项目的对齐无效。
三，弹性容器相关的属性
1，flex-direction 属性：
主轴的方向（即弹性项目的排列方向）。
1 | .flex-container { |
2，flex-wrap 属性：
主轴上的排列是否换行，和侧轴上的排列方向。
1 | .flex-container { |
3，flex-flow 属性：
flex-direction 属性和 flex-wrap 属性的简写形式。
1 | .flex-container { |
4，justify-content 属性：
定义了弹性项目在主轴上的对齐方式。
1 | .flex-container { |
5，align-items 属性：
定义弹性项目在侧轴上的对齐方式。
1 | .container { |
6，align-content 属性：
定义了多根主轴在侧轴上的对齐方式，如果弹性容器内只有一根主轴则该属性无效。
1 | .flex-container { |
四，弹性项目相关的属性
1，order 属性：
定义弹性项目的排列顺序，数值越小，排列越靠前。
1 | .flex-item { |
2，flex 属性：
是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，后两个属性可选。
1 | .flex-item { |
flex 属性有四个快捷值：
flex: initial
等同于：flex: 0 1 auto
flex: auto
等同于：flex: 1 1 auto
flex: none
等同于：flex: 0 0 auto
flex: \
等同于：flex: \
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
3，flex-grow 属性：
如果存在剩余空间时，计算弹性项目放大的权重，默认不放大。
1 | .flex-item { |
4，flex-shrink 属性：
如果空间不足时，计算弹性项目缩小的权重。
1 | .flex-item { |
flex-shrink 的计算详解：
How does flex-shrink factor in padding and border-box?
5，flex-basis 属性：
定义在分配多余空间之前，弹性项目占据的主轴空间 (main size)。
浏览器会根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
1 | .flex-item { |
深入研究：flex-basis 和 width 属性在弹性布局中作用？
6，align-self 属性：
定义单个弹性项目自己的对齐方式，覆盖 align-items 属性。
默认值为 auto，表示继承了弹性容器的 align-items 属性，如果弹性容器没有 align-items 属性，则为 stretch。
1 | .flex-item { |
