換行後如何確保 Flexbox 中的項目寬度一致？

Flexbox 包裹後的項目寬度一致性

簡介：
在CSS 中，flexbox 佈局透過賦予元素動態大小來提供排列元素的靈活性和包裹能力。然而，一個常見的問題是確保換行後項目寬度相等。

問題：
使用 Flexbox 時，可以建立一種佈局，其中項目具有最小寬度並且可以增長以填充可用空間。然而，當項目換行到多行時，最後一行項目的寬度可能不均勻，導致外觀不良。

僅 CSS 解決方案：
不幸的是，純 CSS 不支援目前提供了一個乾淨的解決方案來對齊最後一行中的靈活項目。這超出了 Flexbox 規範的範圍。

替代方法：CSS 網格佈局
網格佈局是另一種 CSS3 技術，為這個問題提供了解決方案。網格可以更精確地控制項目放置，並且可以確保最後一行的項目寬度相等：

代碼：

.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;
}

解釋：

• 解釋：
• display: grid 設定容器元素使用網格佈局。
• grid-template-columns 定義網格中的列，自動調整根據需要建立盡可能多的列，並使用 minmax() 設定每列的最小和最大寬度。

grid-auto-rows 指定行的高度，在本例中為 20px。 grid-gap 在網格之間加入一些空間物品。

以上是換行後如何確保 Flexbox 中的項目寬度一致？的詳細內容。更多資訊請關注PHP中文網其他相關文章！