如何實現跨行的 Flex 項目寬度相等，即使在換行時也是如此？

可變大小容器中的等寬Flex 項目

Flexbox 允許靈活且響應式的佈局，但在嘗試維護時可能會遇到挑戰清單換行後Flex 項目之間的寬度相等。

目前 Flexbox限制

在目前規格中，Flexbox 缺少最後一行等寬對齊的本機解。這是因為 Flex 項目的大小是根據可用空間調整的，最後一行的剩餘空間可能較少。

替代解決方案：網格佈局

網格佈局是另一種 CSS 佈局技術，它為這種對齊問題提供了更強大的解決方案。網格允許在容器內明確調整元素的大小和位置：

CSS 代碼

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

說明

• grid-template-columns屬性定義網格中列的大小和數量（最多適合容器，每個最小寬度為 100px 和靈活的 1fr 單位）。
• grid-auto-rows 屬性設定行的高度（在本例中為 20px）。
• grid-gap 指定項目之間的空間。

此配置有效地在 Flex 項目之間平均分配可用寬度，允許它們包裹和即使在最後一行也保持相同的大小。

以上是如何實現跨行的 Flex 項目寬度相等，即使在換行時也是如此？的詳細內容。更多資訊請關注PHP中文網其他相關文章！