共计 672 个字符，预计需要花费 2 分钟才能阅读完成。
Flexbox 布局（Flexible Box）模块（截至 2017 年 10 月的 W3C 候选举荐）旨在提供一种更无效的形式来布局、对齐和调配容器中 item 元素之间的空间，即便它们的大小未知和 / 或动静，这就是布局名称中 弹性 的由来。
flex 布局背地的次要思维是让容器可能扭转其我的项目的宽度 / 高度（和程序）以自适应地填充可用空间（次要是为了适应所有类型的显示设施和屏幕尺寸）。弹性容器扩大 item 以填充可用的可用空间，在必要时也会膨胀容器内元素的宽度，以避免溢出 (overflow).
最重要的是，与惯例布局（基于垂直的块和基于程度的内联）相比，flexbox 布局是方向不可知的。尽管基于垂直块的布局和基于程度方向的内联布局也可能工作，但它们不足灵活性来反对大型或简单的应用程序，尤其是在波及方向更改、调整大小、拉伸、膨胀等方面时更显得力不从心。
Flexbox 布局最适宜应用程序的组件和小型布局，而 Grid 布局实用于大型布局。
因为 flexbox 是一个残缺的模块而不是一个繁多的属性，它波及很多货色，包含它的整个属性集。其中一些要设置在容器（父元素，称为 flex container）上，而剩下的属性要设置在子元素（称为 flex item）上。
如果惯例布局基于块和内联流向，则弹性布局基于弹性流向。上面这张图解释了 flex 布局背地的次要思维。
Flex 容器里的 items 元素，要么沿着 main 轴方向布局，要么沿着 cross 轴方向布局。
Flex 容器和容器里的 item 元素的对应关系如下图所示：
display:flex 这个 css 属性即可将一个容器设置成 Flex 布局的容器：