即使在包裝後，如何才能實現等寬的 Flex 專案？

Flex 專案即使在換行後也保持相等寬度

在 CSS 定位領域，即使 Flex 專案換行後也實現相同寬度可能會帶來挑戰。 Flexbox 是一個強大的佈局模組，但無法為這種情況提供原生解決方案。

目前的 Flexbox 實作缺乏在最後一行或最後一列中均勻對齊靈活項目的能力。此限制是當前規範所固有的，尚未解決。

有關解決此問題的更深入分析和替代方法，請參閱以下相關資源：

• [Sizing flex最後的專案row](https://stackoverflow.com/ questions/34259120/sizing-flex-items-on-the-last-row)
• [Flex項目是否可以與其上方的項目緊密對齊?](https://css-tricks.com/flexbox-tightly-align-last-row/)

但是，在Flexbox 之外， 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;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

使用這個CSS網格解決方案，您可以輕鬆地將靈活的項目對齊為等寬，即使它們換行為多行。

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