Flexbox 中的盒模型對齊

基本示例

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

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

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

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

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

軸和 flex-direction

Flexbox 遵循文件的書寫模式，因此如果您使用英語工作並將 justify-content 設定為 flex-end，這將使專案與 flex 容器的末尾對齊。如果您使用 flex-direction 設定為 row，則此對齊將沿內聯方向進行。

但是，在 flexbox 中，您可以透過將 flex-direction 設定為 column 來更改主軸。在這種情況下，justify-content 將在塊方向上對齊專案。因此，在 flexbox 中考慮主軸和交叉軸時，最簡單的方式是這樣

• 主軸 = 由 flex-direction 設定的方向 = 透過 justify-content 對齊
• 交叉軸 = 跨主軸執行 = 透過 align-content、align-self/align-items 對齊

主軸對齊

• justify-content

交叉軸對齊

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

Flexbox 中沒有 justify-self

在主軸上，Flexbox 將 flex 專案作為一個組來處理。計算佈局專案所需的空間量，然後將剩餘空間用於分配。justify-content 屬性控制如何使用剩餘空間。設定 justify-content: flex-end，額外空間放置在專案之前；設定 justify-content: space-around，額外空間放置在專案兩邊，等等。

這意味著 justify-self 屬性在 flexbox 中沒有意義，因為我們總是處理移動整個專案組。

在交叉軸上，align-self 是有意義的，因為我們可能在該維度中在 flex 容器中有額外的空間，其中單個專案可以移動到開始和結束位置。

對齊和自動外邊距

在 flexbox 中有一個特定的用例，我們可能會認為 justify-self 屬性是我們需要的，這就是當我們想要拆分一組 flex 專案時，也許是為了建立一種分體式導航模式。對於此用例，我們可以使用 auto 外邊距。設定為 auto 的外邊距將吸收其維度中的所有可用空間。這就是使用自動外邊距居中塊的方式。透過將左外邊距和右外邊距設定為 auto，塊的兩側都試圖佔據所有可用空間，從而將盒子推到中心。

透過在一組對齊到起始位置的 flex 專案中的一個專案上設定 auto 的 margin，我們可以建立分體式導航。這與 flexbox 和對齊屬性配合得很好。一旦沒有空間可用於自動外邊距，該專案就會以與其他所有 flex 專案相同的方式表現，並收縮以嘗試適應空間。

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

.box {
  display: flex;
  border: 2px dotted rgb(96 139 168);
}
.push {
  margin-left: auto;
}

gap 屬性

• row-gap
• column-gap
• gap

在專案之間建立固定大小的間隙

在主軸上，column-gap 屬性在相鄰專案之間建立固定大小的間隙。

在交叉軸上，row-gap 屬性在相鄰的 flex 行之間建立間距，因此 flex-wrap 也必須設定為 wrap 才能使其生效。

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

.box {
  width: 450px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 2em;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  flex: 1;
}

另見

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