一. 弹性盒的定义

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

注意：

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
容器先根据”flex-wrap"的属性值来确定是单行布局或多行布局，然后把条目分配到对应的行中，最后在每一行内进行空白空间的分配。

二. 尺寸

弹性子元素的主轴尺寸的公式为：

假设：

弹性容器的主轴尺寸为ConSize；
该弹性容器的某行内有n个弹性子元素，
这些弹性子元素的flex-basis分别为Item1Basis、Item2Basis、Item3Basis......ItemNBasis；
这些弹性子元素的flex-grow分别为Item1Grow、Item2Grow、Item3Grow......ItemNGrow；
这些弹性子元素的flex-shrink分别为Item1Shrink、Item2Shrink、Item3Shrink......ItemNShrink；
这些弹性子元素的主轴尺寸分别为Item1Size、Item2Size、Item3Size......ItemNSize；

BasisTotal = Item1Basis + Item2Basis + …+ ItemNBasis
GrowTotal = Item1Grow + Item2Grow + …+ ItemNGrow
ShrinkTotal = Item1Shrink + Item2Shrink + …+ ItemNShrink

则有：
对于任意一个弹性子元素ItemX，有：

当弹性容器在主轴尺寸上有多余的空间时，即：当 ConSize >= BasisTotal 时，有：
ItemXSize = ItemXBasis + ( ConSize - BasisTotal )*( ItemXGrow/GrowTotal )

当弹性容器在主轴尺寸上的空间不足时，即：当 ConSize <= BasisTotal 时，有：
ItemXSize = ItemXBasis + ( ConSize - BasisTotal )*( ItemXShrink/GrowShrink )
即：
ItemXSize = ItemXBasis - ( BasisTotal - ConSize)*( ItemXShrink/GrowShrink )

三. 对齐

justify-content： 设置或检索在弹性容器的行的范围内弹性盒子元素在主轴方向上的对齐方式。
操作范围：行；
操作对象：行内的弹性子元素；
适用于：flex容器；
备注：当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
取值效果如下：