CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
相关词汇
如下图中是一个 flex-direction 属性为 row 的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。
弹性容器（Flex Container）
包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
弹性项目（Flex item）
弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。
轴（Axis）
每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
flex-direction确立主轴。justify-content定义了在当前行上，弹性项目沿主轴如何排布。align-items定义了在当前行上，弹性项目沿侧轴默认如何排布。align-self定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由align-items所确立的默认值。方向（Direction）
弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。order属性将元素与序号关联起来，以此决定哪些元素先出现。flex-flow属性是flex-direction和flex-wrap属性的简写，决定弹性项目如何排布。行（Line）
根据flex-wrap属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。尺寸(Dimension)
根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。min-height与 `min-width 属性初始值将为 0。flex属性是flex-grow、flex-shrink和flex-basis属性的简写，描述弹性项目的整体的伸缩性。
不影响弹性盒子的属性
由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：
- 多栏布局模块的
column-*属性对弹性项目无效。 float与clear对弹性项目无效。使用float将使元素的display属性计为block。vertical-align对弹性项目的对齐无效。