flexbox 会生成 :before 和 :after 吗？答案

【问题标题】：Do flexboxes generate :before and :after?flexbox 会生成 :before 和 :after 吗？
【发布时间】：2018-05-28 14:16:06
【问题描述】：

好奇的问题，网上找不到答案。

我在 CSS 中使用了很多 :before 和 :after，所以我在样式表的开头声明了这一点：

:before, :after {
   content: "";
}

这样，我不必每次需要伪类时都声明content。

但是当我这样做时，我用display: flex 显示的元素会以不同的方式显示。

示例：它们居中，而我声明 justify-content: space-between

所以我想知道：flexboxes 用content: "something" 生成自己的伪类吗？

【问题讨论】：

定义了你的 before 和 after，因此它们成为你的 flex 容器的子元素，这使得它们成为 flex 项目。

标签： css flexbox pseudo-class

【解决方案1】：

不，弹性框不会使用content: "something" 生成它们自己的伪类。这里发生的事情与所有其他 ::before 和 ::after 伪元素一样，即您正在创建额外的内容。 content: "" 和 content: none 不一样！

在这个例子中，我给了孩子们边框，这样你就可以看到他们在哪里。没有::before 和::after：

section {
  display: flex;
  background: yellow;
  justify-content: space-between;
}
section div {
  border: 1px solid red;
}

<section>
 <div>one</div>
 <div>two</div>
</section>

还有::before 和::after。所以现在你有两个元素和两个伪元素，总共有四个内容。行为完全符合预期：这四个位均匀分布。

section {display:flex; background:yellow; justify-content:space-between}
section div {border:1px solid red;}
section::before, section::after {content:""; border:1px solid red;}

<section>
 <div>one</div>
 <div>two</div>
</section>

如果这对弹性框来说是不希望的行为，只需将这些元素的 content 属性重置回 none。

【讨论】：

【解决方案2】：

在盒子模型中，伪元素成为容器的子元素。因此，当您在 flex 容器上声明 ::before / ::after 时，这些伪元素将成为 flex 项。

如果容器中有两个实际 (DOM) 元素，即 justify-content: space-between，然后添加 ::before 和 ::after 元素，您现在有四个弹性项目。这些伪元素占据边缘位置，迫使 DOM 元素散布在容器中。

这实际上是一种可用于在容器中均匀分布弹性项目的方法。不是space-between，不是space-around，而是space-evenly，它在所有项目的两侧分配相等的空间。

由于 space-evenly 尚未得到广泛支持，因此伪元素 hack 是一种可靠的解决方法。

更多详情：Equal space between flex items

【讨论】：