如何消除 Flex 项目缠绕时之间的间隙？

在 Flex 项目换行时删除它们之间的空间

您正在尝试实现多行 Flex 布局，其中当没有足够的垂直空间时，项目会水平流动。但是，您会遇到列之间的间隙。

Flex 容器的初始设置是align-content:stretch。这可以将弹性项目均匀地分布在多行容器的横轴上。为了防止这种行为，请将align-content: flex-start应用于容器。

使用单行Flex容器时，您可以使用align-items和align-self沿横轴分配空间。但是，在多行容器中，例如您的情况，您可以使用align-content属性沿交叉轴分布柔性线（行或列）。

align-content属性接受各种值，包括：

• flex-start
• flex-end
• 中心
• 空间之间
• 空间周围
• 拉伸

默认值是拉伸的，这意味着剩余的可用空间在所有行之间平均分配，导致它们扩展。

解决方案

要消除代码示例中列之间的间隙，修改CSS:

.container {
  align-content: flex-start;
}

结论

使用align-content：flex-start确保伸缩线从容器顶部开始并继续向下，没有任何额外的间隙。这与您正在寻找的预期布局一致。

以上是如何消除 Flex 项目缠绕时之间的间隙？的详细内容。更多信息请关注PHP中文网其他相关文章！