CSS 盒模型對齊概述

關鍵概念和術語

該規範詳細說明了一些對齊術語，以便在特定佈局方法的實現之外更容易地討論這些對齊屬性。還有一些關鍵概念是所有佈局方法共有的。

與書寫模式的關係

對齊與書寫模式相關，因為當我們對齊一個專案時，我們不考慮是否將其與上、右、下、左等物理維度對齊。相反，我們根據我們正在處理的特定維度的開始和結束來描述對齊。這確保了無論文件使用何種書寫模式，對齊都能以相同的方式工作。

對齊的兩個維度

使用盒模型對齊屬性時，你將在兩個軸中的一個上對齊內容——內聯軸（或主軸）和塊級軸（或交叉軸）。內聯軸是句子中的單詞在所用書寫模式下流動的軸。例如，對於英語，內聯軸是水平的。塊級軸是塊（如段落元素）排列的軸；它與內聯軸交叉。

在內聯軸上對齊專案時，你將使用以 justify- 開頭的屬性。

• justify-items
• justify-self
• justify-content

在塊級軸上對齊專案時，你將使用以 align- 開頭的屬性。

• align-items
• align-self
• align-content

Flexbox 增加了一個額外的複雜性，即當 flex-direction 設定為 row 時，上述情況才成立。當 flexbox 設定為 column 時，這些屬性會互換。因此，在使用 flexbox 時，考慮主軸和交叉軸比考慮內聯軸和塊級軸更容易。justify- 屬性始終用於在主軸上對齊，align- 屬性則用於在交叉軸上對齊。

對齊主體

對齊主體是正在被對齊的東西。對於 justify-self 或 align-self，或者在使用 justify-items 或 align-items 對這些值進行分組設定時，對齊主體將是應用該屬性的元素的外邊距盒（margin box）。justify-content 和 align-content 屬性因佈局方法而異。

對齊容器

對齊容器是對齊主體在其內部進行對齊的盒子。這通常是對齊主體的包含塊。一個對齊容器可以包含一個或多個對齊主體。

下圖展示了一個對齊容器，內部有兩個對齊主體。

對齊型別

規範詳細說明了三種不同型別的對齊方式；這些方式使用關鍵字值。

• 位置對齊
• 基線對齊
• 分佈對齊

位置對齊

位置對齊是指對齊主體相對於其對齊容器的位置。位置對齊的關鍵字值為位置對齊定義，並且可以用作 justify-content 和 align-content 的內容對齊值，以及 justify-self 和 align-self 的自對齊值。

• center
• start
• end
• self-start
• self-end
• flex-start 僅用於 flexbox
• flex-end 僅用於 flexbox
• left
• right

除了與螢幕物理屬性相關的物理值 left 和 right 之外，所有其他值，即 <self-position> 和 <content-position> 值，都是邏輯值，並且與內容的書寫模式相關。

例如，在 CSS 網格佈局中，如果你使用英語並將 justify-content 設定為 start，這會將專案在內聯維度上移動到起始位置，也就是左側，因為英語句子從頁面的左側開始。如果你使用的是阿拉伯語（一種從右到左的語言），那麼相同的 start 值將導致專案移動到右側，因為阿拉伯語句子從頁面的右側開始。

兩者都設定了 justify-content: start，但由於書寫模式不同，兩個起始位置也不同。

基線對齊

基線對齊是指在一個對齊上下文中，多個對齊主體的基線之間的關係。基線對齊的 <baseline-position> 關鍵字用於在一組對齊主體中對齊盒子的基線。它們可以作為 justify-content 和 align-content 的內容對齊值，以及 justify-self 和 align-self 的自對齊值。

• baseline
• first baseline
• last baseline

基線內容對齊——為 justify-content 或 align-content 指定一個基線對齊值——在按行排列專案的佈局方法中起作用。透過在盒子內部新增內邊距，使對齊主體相互之間進行基線對齊。

基線自對齊透過在盒子外部新增外邊距來移動盒子以實現基線對齊。自對齊可以透過使用 justify-self 或 align-self 對單個盒子進行，或者透過使用 justify-items 和 align-items 對一組盒子進行。

分佈對齊

分佈對齊將對齊定義為在對齊主體之間分配空間。分佈對齊的 <content-distribution> 關鍵字與 align-content 和 justify-content 屬性一起使用。這些關鍵字定義了在顯示對齊主體後，任何額外空間會如何處理。這些值如下：

• stretch
• space-between
• space-around
• space-evenly

例如，在彈性佈局中，專案最初使用 flex-start 對齊。在從上到下的水平書寫模式下（例如英語），當 flex-direction 設定為 row 時，專案從最左側開始，顯示專案後所有可用空間都放在它們的後面。

如果你在彈性容器上設定 justify-content: space-between，可用空間現在將被分配並放置在專案之間。

要使這些關鍵字生效，你希望對齊專案的維度上必須有可用空間。沒有空間，就無可分配。

基本示例

以下示例演示了一些盒模型對齊屬性如何在網格和彈性盒中應用。

CSS 網格佈局對齊示例

在這個網格佈局示例中，網格容器在內聯（主）軸上排列完固定寬度的軌道後還有額外的空間。這個空間使用 justify-content 進行分配。在塊級（交叉）軸上，專案在其網格區域內的對齊由 align-items 控制。第一個專案透過將 align-self 設定為 center 來覆蓋在組上設定的 align-items 值。

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

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

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

.box {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  align-items: start;
  justify-content: space-between;
}

.box :first-child {
  align-self: center;
}

Flexbox 對齊示例

在此示例中，三個彈性專案在主軸上使用 justify-content 對齊，在交叉軸上使用 align-items 對齊。第一個專案透過將 align-self 設定為 center 來覆蓋在組上設定的 align-items。

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

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

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

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.box :first-child {
  align-self: center;
}

溢位對齊

<overflow-position> 關鍵字 safe 和 unsafe 有助於定義當對齊主體大於對齊容器時的行為。safe 關鍵字將在指定對齊導致溢位的情況下對齊到 start，目的是避免“資料丟失”，即專案的一部分超出對齊容器的邊界且無法滾動到。

如果你指定 unsafe，那麼即使會導致此類資料丟失，對齊也會被遵守。

盒之間的間距

盒模型對齊規範還包括 gap、row-gap 和 column-gap 屬性。這些屬性可以在任何以行或列方式排列專案的佈局方法中，設定行或列中專案之間的一致間距。

gap 屬性是 row-gap 和 column-gap 的簡寫，允許我們一次性設定這些屬性。

• row-gap
• column-gap
• gap

在下面的示例中，一個網格佈局使用 gap 簡寫屬性在行軌道之間設定了 10px 的間距，在列軌道之間設定了 2em 的間距。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

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

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 2em;
}

.box :first-child {
  align-self: center;
}

早期的網格實現包含了帶 grid- 字首的 gap 屬性。所有瀏覽器都支援無字首的屬性，但你可能會在程式碼庫中看到以下屬性：grid-row-gap、grid-column-gap 和 grid-gap。帶字首的版本是無字首版本的別名。

請注意，其他因素也可能會增加顯示的視覺間距，例如使用空間分佈關鍵字或為專案新增外邊距。

按佈局型別劃分的盒模型對齊

由於 CSS 盒模型對齊屬性的實現在與不同規範互動時有所不同，請參考以下指南以瞭解如何將對齊屬性用於各種佈局型別的詳細資訊：

• Flexbox 中的盒模型對齊
• CSS 網格佈局中的盒模型對齊
• 多列布局中的盒模型對齊
• 塊級、絕對定位和表格佈局的盒模型對齊

另見

• CSS display 模組
• CSS 彈性佈局模組
• flexbox 的基本概念
• 在彈性容器中對齊專案
• CSS 網格佈局模組
• 網格佈局中的盒模型對齊