Flexbox布局（FlexibleBox）模块（W3CCandidateRecommendationasofOctober2017）旨在提供一种更有效的方式来布局、对齐和分配容器中项目元素之间的空间，即使它们的大小是未知的和/或动态的，这是布局名称中弹性的来源。弹性布局背后的主要思想是使容器能够改变其项目的宽度/高度（和顺序）以自适应地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex容器扩展项目以填充可用的可用空间，并在必要时缩小容器内元素的宽度以防止溢出。最重要的是，它与常规布局（基于垂直的块和基于水平的内联）兼容。相比之下，flexbox布局与方向无关。虽然基于垂直块的布局和水平方向的内联布局也可以，但它们缺乏支持大型或复杂应用程序的灵活性，尤其是在涉及方向更改、调整大小、拉伸、收缩等方面，似乎无能为力。Flexbox布局最适合应用程序组件和小型布局，而Grid布局适用于大型布局。由于flexbox是一个完整的模块而不是一个单一的属性，它涉及到很多东西，包括它的整个属性集。其中一些属性是在容器（父元素，称为弹性容器）上设置的，而其余的是在子元素（称为弹性项目）上设置的。如果说常规布局是基于块和内联流，那么弹性布局就是基于弹性流。下图解释了flex布局背后的主要思想。弹性容器中的项目元素要么沿主轴布局，要么沿横轴布局。flex容器与容器中item元素的对应关系如下图所示：css属性display:flex可以设置一个容器为flex布局容器：
