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

前端之家收集整理的这篇文章主要介绍了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

原文链接:https://www.f2er.com/html/231794.html

猜你在找的HTML相关文章