换行后如何确保 Flexbox 中的项目宽度一致？

Flexbox 包裹后的项目宽度一致性

简介：
在 CSS 中，flexbox 布局通过赋予元素动态大小来提供排列元素的灵活性和包裹能力。然而，一个常见的问题是确保换行后项目宽度相等。

问题：
使用 Flexbox 时，可以创建一种布局，其中项目具有最小宽度并且可以增长以填充可用空间。然而，当项目换行到多行时，最后一行项目的宽度可能不均匀，从而导致外观不良。

仅 CSS 解决方案：
不幸的是，纯 CSS 不支持目前提供了一个干净的解决方案来对齐最后一行中的灵活项目。这超出了 Flexbox 规范的范围。

替代方法：CSS 网格布局
网格布局是另一种 CSS3 技术，为这个问题提供了解决方案。网格可以更精确地控制项目放置，并可以确保最后一行的项目宽度相等：

代码：

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

解释：

• display: grid 设置容器元素使用网格布局。
• grid-template-columns 定义网格中的列，自动调整根据需要创建尽可能多的列，并使用 minmax() 设置每列的最小和最大宽度。
• grid-auto-rows 指定行的高度，在本例中为 20px。
• grid-gap 在网格之间添加一些空间物品。

以上是换行后如何确保 Flexbox 中的项目宽度一致？的详细内容。更多信息请关注PHP中文网其他相关文章！