CSS 彈性盒佈局

CSS 彈性盒佈局模組定義了一個為使用者介面設計最佳化的 CSS 盒模型，以及在單一維度上佈局項目的方法。在彈性佈局模型中，彈性容器的子元素可以朝任何方向佈局，並且可以「彈性」調整其尺寸，可以擴展以填滿未使用的空間，或縮小以避免溢出父元素。子元素的水平和垂直對齊都可以輕鬆地操作。

彈性盒佈局實作

在下面的範例中，一個容器被設定為 display: flex，這意味著三個子項目變成了彈性項目。justify-content 的值被設定為 space-between，以便在主軸上均勻地分配項目間的空間。每個項目之間都放置了相等的空間，而最左和最右的項目則與彈性容器的邊緣對齊。你也可以看到，由於 align-items 的預設值是 stretch，項目在交錯軸上被拉伸。項目會拉伸至彈性容器的高度，使它們每一個都看起來和最高的項目一樣高。

html

<div class="box">
  <div>一</div>
  <div>二</div>
  <div>三 <br />有 <br />額外 <br />文字</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;
}

彈性盒的基本概念: 彈性盒功能概覽。
彈性盒與其他佈局方法的關係: 彈性盒如何與其他佈局方法及其他 CSS 規範相關聯。
在彈性容器中對齊項目: 盒對齊屬性如何與 Flexbox 一同運作。
排序彈性項目: 解釋改變項目順序和方向的不同方法，並涵蓋這樣做可能產生的問題。
控制彈性項目沿主軸的比例: 解釋 flex-grow、flex-shrink 和 flex-basis 屬性。
精通彈性項目的換行: 如何建立具有多行的彈性容器，並控制這些行中項目的顯示方式。
彈性盒的典型用例: 彈性盒典型的常見設計模式。
CSS 佈局：彈性盒: 學習如何使用彈性盒佈局來建立 Web 佈局。
彈性盒中的盒對齊: 詳細介紹 CSS 盒對齊中專屬於彈性盒的功能。

規範

Specification
CSS Flexible Box Layout Module Level 1

CSS 彈性盒佈局

彈性盒佈局實作

參考

屬性

術語

指南

相關概念

規範

參見