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

Question

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

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

但是,父div有一个:afteron,它使得三个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>

Answer 1

简答

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

说明

::before::afterFlex容器上的伪元素和Flex元素成为弹性项目.

从规格:

4. Flex项目

Flex容器的每个in-flow子项都成为flex项.

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

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

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

流入::after和::before伪元素现在是弹性项目 (bug 867454).

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

• 在Firefox和IE11中,绝对定位的flex项目不会从正常流程中删除

请参阅我的答案,了解伪元素的插图justify-content:

• justify-content:space-between无法按预期对齐元素

Answer 2

如果这是一个继承的属性，只需覆盖它

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

.container div {
    background: red;
    height: 245px;
    width: 100px;
}

/* definitions from a framework */
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

/* definitions override */
.container.flexcontainer:before, 
.container.flexcontainer:after {
   display: none;  
}

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