伪元素在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忽略之前
和:之后
?
.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
Flex容器的每个流入子代都成为一个flex项目。
换句话说,处于正常流程(即不是绝对定位)的弹性容器的每个孩子都被视为弹性物品。
大部分(如果不是全部的话)浏览器将其解释为包含伪元素。 :: before
伪是第一个flex项目。 :: after
项是最后一项。
下面是Firefox文档中对这种渲染行为的进一步确认: / p>
解决您的问题的一个可能的方法是从绝对定位的正常流程中移除伪元素。但是,这种方法可能不适用于所有浏览器:
在这里查看我的答案,了解 I have three divs inside a parent div that are being spaced out using: However, the parent div has an
In CSS, there is currently no 100% reliable way to prevent pseudo-elements from impacting the From the spec: 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 Here is further confirmation of this rendering behavior from Firefox documentation: In-flow 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: See my answer here for illustrations of pseudo elements messing up 这篇关于伪元素在flexbox布局中打破justify-content:space-between的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! justify-content
:
display: flex;
justify-content: space-between;
: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
?.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
justify-content: space-between
calculation.Explanation
::before
and ::after
pseudo elements on a flex container become flex items.
::before
pseudo is the first flex item. The ::after
item is the last.
::after
and ::before
pseudo-elements are now flex
items
(bug 867454).justify-content
: