即使在包裹后，如何才能实现等宽的 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中文网其他相关文章！