如何在 Flex 项目（包括第一个项目和最后一个项目）之间实现相等间距？-css教程-PHP中文网

如何在 Flex 项目（包括第一个项目和最后一个项目）之间实现相等间距？

Barbara Streisand

发布： 2024-11-15 08:53:03

原创

940 人浏览过

How Can I Achieve Equal Spacing Between Flex Items, Including the First and Last?

Flex 项目之间的等间距

问题

在 Flexbox 子项周围实现等间距是一项挑战，正如上一篇文章中所强调的，其中 justify-content ： space-around 被认为是一个不完美的解决方案。本文深入研究了更全面的方法来确保相等的间距，包括第一个和最后一个项目。

解决方案

伪元素

最近的浏览器进步允许伪元素（::before 和 ::after）被视为 Flex 容器中的 Flex 项目。这为创建等间距开辟了新的可能性。

通过向容器添加 ::before 和 ::after 伪元素并利用 justify-content: space- Between 以及零宽度伪元素，我们可以在可见的弹性项目之间创建等间距的错觉。

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
}

flex-container::after {
  content: "";
}

登录后复制

以上是如何在 Flex 项目（包括第一个项目和最后一个项目）之间实现相等间距？的详细内容。更多信息请关注PHP中文网其他相关文章！