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

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

总结

以上是内存溢出为你收集整理的html – 伪元素打破了对齐内容：flexbox布局中的空格全部内容，希望文章能够帮你解决html – 伪元素打破了对齐内容：flexbox布局中的空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。