我在父div中有三个div,它们使用以下方式间隔开：
display: flex; justify-content: space-between;
但是,父div有一个：在它之后,这使得三个div不会出现在父div的边缘.有没有办法让flexBox忽略：before和：after？
.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
