如何使用 Flexbox 將元素放在最後一行居中？

如何使用Flexbox 將最後一行的元素居中

使用CSS 網格佈局多個項目時，對齊可能會很困難他們排成一排。網格主要是為了對齊列或軌道內的項目而設計的，因此很難實現整行的對齊。

為什麼 CSS 網格不適合

CSS 網格利用由軌道和單元組成的系統，軌道可以水平或垂直運行。將項目放置在網格單元格內時，您可以控制它們在該特定單元格內的對齊方式。然而，跨多個單元格或整行的項目對齊會受到縱橫交錯的軌道的阻礙。

使用 Flexbox 進行對齊

跨行對齊項目的更合適的方法就是使用flexbox。 Flexbox 專門設計用於沿著單軸（水平或垂直）排列項目，讓您可以更好地控制對齊方式。

要使用 Flexbox 將元素置於最後一行居中，請執行以下步驟：

1. 將項目包裹在彈性容器中。
2. 將 justify-content 屬性設定為居中，以在容器內水平對齊項目容器。
3. 使用 flex 屬性指定每個項目所需的寬度和靈活性。
4. 確保所有元素的 box-sizing 屬性設定為 border-box，以在其元素中包含內邊距和邊框整體寬度計算。

範例程式碼

以下程式碼片段示範如何使用 Flexbox在最後一行實現居中對齊：

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

說明

在此範例中：

• #container 設定為具有flex -wrap:wrap的彈性容器，以允許專案包裝到多個
• justify-content: center 確保專案在容器內水平居中。
• flex 屬性用於根據可用空間動態計算每個項目的寬度。
• 設定box-sizing：border-box 保證padding 和border 包含在item 的整體寬度中，防止不均勻

透過使用Flexbox，無論項目數量多少，您都可以在最後一行實現居中對齊，使您的佈局在視覺上更具吸引力。

以上是如何使用 Flexbox 將元素放在最後一行居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！