CSS 弹性盒子布局

**CSS 弹性盒布局**模块定义了一种针对用户界面设计和一维项目布局优化的 CSS 框模型。在弹性布局模型中，弹性容器的子元素可以沿任何方向布局，并可以“弹性”调整其大小，或者增长以填充未使用的空间，或者缩小以避免溢出父元素。子元素的水平和垂直对齐可以轻松地进行操作。

弹性盒子布局的实际应用

在下面的示例中，一个容器被设置为display: flex，这意味着三个子元素变成了弹性元素。justify-content的值被设置为space-between，以便在主轴上均匀地间隔项目。在每个项目之间放置等量空间，左右项目与弹性容器的边缘齐平。您还可以看到，由于align-items的默认值为stretch，因此项目在交叉轴上拉伸。项目拉伸到弹性容器的高度，使它们每个都看起来像最高的项目一样高。