html – 伪元素打破了对齐内容：flexbox布局中的空格

我在父div中有三个div,它们使用以下方式间隔开：

display: flex;
justify-content: space-between;

但是,父div有一个：在它之后,这使得三个div不会出现在父div的边缘.有没有办法让flexBox忽略：before和：after？

codepen.io

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 300px;
  }
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

解决方法

简答

在CSS中,目前还没有100％可靠的方法来防止伪元素影响justify-content：space-between计算.

说明

::之前和::之后Flex容器上的伪元素变为flex项.

从规格：

07000

Each in-flow child of a flex container becomes a flex item.

换句话说,处于正常流动(即,未绝对定位)的柔性容器的每个子代被认为是柔性项目.

大多数(如果不是全部)浏览器将其解释为包含伪元素. :: before伪是第一个flex项. :: after项是最后一项.

以下是Firefox文档中对此呈现行为的进一步确认：

07001
(07002).

解决问题的一种可能方法是使用绝对定位从正常流中删除伪元素.但是,此方法可能无法在所有浏览器中使用：

> Absolutely positioned flex item is not removed from normal flow in Firefox & IE11

请参阅我在这里的答案,了解伪元素搞乱辩解内容的插图：

> justify-content: space-between failing to align elements as expected