如何实现跨行的 Flex 项目宽度相等，即使在换行时也是如此？

可变大小容器中的等宽 Flex 项目

Flexbox 允许灵活且响应式的布局，但在尝试维护时可能会遇到挑战列表换行后 Flex 项目之间的宽度相等。

当前 Flexbox限制

在当前规范中，Flexbox 缺少最后一行等宽对齐的本机解决方案。这是因为 Flex 项目的大小是根据可用空间调整的，最后一行的剩余空间可能较少。

替代解决方案：网格布局

网格布局是另一种 CSS 布局技术，它为这种对齐问题提供了更强大的解决方案。网格允许在容器内显式调整元素的大小和位置：

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;
}

说明

• grid-template-columns 属性定义网格中列的大小和数量（最多适合容器，每个最小宽度为 100px 和灵活的 1fr 单位）。
• grid-auto-rows 属性设置行的高度（在本例中为 20px）。
• grid-gap 指定项目之间的空间。

此配置有效地在 Flex 项目之间平均分配可用宽度，允许它们包裹和即使在最后一行也保持相同的大小。

以上是如何实现跨行的 Flex 项目宽度相等，即使在换行时也是如此？的详细内容。更多信息请关注PHP中文网其他相关文章！