弹性盒模型

弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。
即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。
在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。
当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。
比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。
弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。
弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
主轴的对齐方式和换行条件：
flex-direction用来确定主轴的方向，从而确定基本的条目排列方式。"flex-direction"属性的可选值。
"flex-wrap"：
用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。
弹性盒布局模型的核心：在于容器中条目的尺寸是弹性的。
容器可以根据本身尺寸的大小来动态地调整条目的尺寸。
当容器中有空白空间时，条目可以扩展尺寸以占据额外的空白空间；当容器中的空间不足时，条目可以缩小尺寸以防止超出容器范围。
条目尺寸的弹性由 3 个 CSS 属性来确定，分别是"flex-basis"、"flex-grow"和"flex-shrink"。
"flex-basis"：
属性声明接受的值与"width"属性是一样的，用来确定弹性条目的初始主轴尺寸。这是条目的尺寸被容器调整之前的初始值。
如果"flex-basis"的值为 auto，则实际使用的值是主轴尺寸属性的值，即 width 或 height 属性的值。
如果主轴尺寸属性的值也是 auto，则使用的值由条目内容的尺寸来确定。
"flex-grow"：
属性的值是一个没有单位的非负数，默认值是 1。"flex-grow"属性的值表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例。