CSS 弹性盒子布局

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

弹性盒子布局实战

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

html

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
</div>

css

body {
  font-family: sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  justify-content: space-between;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 1em;
}