即使在包装后，如何确保 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中文网其他相关文章！