即使在包裝後，如何確保 Flex 項目的寬度相等？

Flex 專案即使在包裝後也保持等寬

Flexbox 提供了一種創建靈活佈局的強大方法，但實現特定對齊要求並不總是那麼簡單。一個常見的挑戰是確保彈性項目的寬度相等，即使它們換行後也是如此。

問題

考慮一個場景，其中您有一個內容長度不同的項目清單。您希望它們均勻拉伸以填充容器寬度，同時保持最小寬度並根據需要換行到新行。然而，單獨使用 Flexbox，最後一行的項目可能不會均勻對齊。

原始 Flexbox 方法

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  min-width: 100px;
  flex-grow: 1;
}

這種方法會在項目之間分配可用空間，但它不會確保最後一行的寬度相等。

網格佈局解決方案

幸運的是，CSS 網格佈局提供了這個問題的解決方案。網格佈局使用更明確的佈局機制，使其更具可預測性。將網格佈局應用於上面的範例可以解決對齊問題。

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

此更新的程式碼片段使用 grid-template-columns 屬性來定義網格中的欄位。 Repeat(auto-fit, ...) 函數會自動分配列以適應內容，確保所有項目具有相同的寬度。

結論

雖然 Flexbox 是一個多功能的佈局工具，但它不適合需要精確項目對齊的情況。如果需要等寬的彈性項目，網格佈局提供了更簡單且更可預測的解決方案。

以上是即使在包裝後，如何確保 Flex 項目的寬度相等？的詳細內容。更多資訊請關注PHP中文網其他相關文章！