伪元素在flexbox布局中打破justify-content：space-between [英] Pseudo elements breaking justify-content: space-between in flexbox layout

问题描述

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

但是，父div在 >这是使三个divs不出去的父div的边缘。有没有办法让flexbox忽略之前和：之后？

codepen.io

  .container {width：100％;显示：flex;证明内容：空间之间; padding-top：50px; background：grey;}。container div {background：red;身高：245px;宽度：300px; } .container：before {content：'';显示：表格; } .container：after {clear：both;内容：'';显示：表格; }  

< div class =container> < DIV>< / DIV> < DIV>< / DIV> < div>< / div>< / div>

解释

$ justify-content：space-between ::之前和 ::之后 flex容器上的伪元素变成flex项目。

$ b

4。 Flex项目

Flex容器的每个流入子代都成为一个flex项目。

换句话说，处于正常流程（即不是绝对定位）的弹性容器的每个孩子都被视为弹性物品。

大部分（如果不是全部的话）浏览器将其解释为包含伪元素。 :: before 伪是第一个flex项目。 :: after 项是最后一项。

下面是Firefox文档中对这种渲染行为的进一步确认： / p>

流入 :: after 和 :: before 伪元素现在变为
项
（ bug 867454 ）。

解决您的问题的一个可能的方法是从绝对定位的正常流程中移除伪元素。但是，这种方法可能不适用于所有浏览器：

• 绝对定位的Flex项目不会从Firefox& IE11

在这里查看我的答案，了解 justify-content ：



• justify-内容：空间 - 未能按预期对齐元素
  

I have three divs inside a parent div that are being spaced out using:

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

However, the parent div has an :after on it which is making the three divs not go out to the edge of parent div. Is there a way to have flexbox ignore the :before and :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>

解决方案

Short Answer

In CSS, there is currently no 100% reliable way to prevent pseudo-elements from impacting the justify-content: space-between calculation.

Explanation

::before and ::after pseudo elements on a flex container become flex items.

From the spec:

4. Flex Items

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

In other words, each child of a flex container that is in the normal flow (i.e., not absolutely positioned), is considered a flex item.

Most, if not all, browsers interpret this to include pseudo-elements. The ::before pseudo is the first flex item. The ::after item is the last.

Here is further confirmation of this rendering behavior from Firefox documentation:

In-flow ::after and ::before pseudo-elements are now flex items (bug 867454).

One possible solution to your problem is to remove the pseudo-elements from the normal flow with absolute positioning. However, this method may not work in all browsers:

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

See my answer here for illustrations of pseudo elements messing up justify-content:

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

这篇关于伪元素在flexbox布局中打破justify-content：space-between的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！