弹性盒FlexibleBox的相关概念

一. 弹性盒的定义

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

注意：

1. 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
2. 容器先根据”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容器；
备注：当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
取值效果如下：

justify-content属性不同值的布局效果.jpg

align-content： 设置或检索 在 弹性容器的范围内 行在侧轴方向上的对齐方式。
操作范围：弹性容器；
操作对象：行；
适用于：多行的flex容器；
备注：请注意本属性在只有一行的伸缩容器上没有效果。
取值效果如下：

align-content属性的不同值的布局效果.jpg

align-items： 定义弹性盒子元素自己 在 弹性容器的行的范围内 在侧轴方向上的对齐方式。
操作范围：行；
操作对象：行内的弹性子元素；
适用于：flex容器；
取值效果如下：

align-items属性不同值的布局效果.jpg

align-self： 定义 在 弹性容器的行的范围内 弹性盒子元素在侧轴方向上的对齐方式。
操作范围：行；
操作对象：行内的弹性子元素；
适用于：flex子项