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;
}