如何在多行中實現等寬 Flex 專案？

在換行期間保持Flex 項目等寬

在CSS 中，實現Flex 項目即使在換行後也保持相等寬度的佈局，可能具有挑戰性。

使用Flexbox

使用Flexbox，雖然可以將項目配置為動態增長以填充容器的寬度，但沒有內置功能來確保所有項目的寬度相等，尤其是在最後一行。此限制源自於 Flexbox 規範的目前範圍。

替代方法：網格佈局

網格佈局是另一種 CSS3 技術，為最後一個提供了更靈活的解決方案 -行對齊。透過利用 grid-template-columns 屬性，即使項目換行為多行，也可以均勻分佈項目。

實作

實作所需的佈局:

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

此程式碼建立一個基於可用寬度自動列分佈的網格。每列可以包含一個或多個彈性項目，其最小寬度為 100 像素，並且彈性寬度會增長以填充列中的剩餘空間。 grid-auto-rows 屬性將每行的高度設定為 20px，grid-gap 在項目之間新增 5px 的間距。

結論

雖然 flexbox 是一個強大的佈局工具，其當前的局限性使得最後一行的等寬對齊具有挑戰性。網格佈局以其更先進的功能，為這種場景提供了可靠的解決方案。

以上是如何在多行中實現等寬 Flex 專案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！