为什么inline-flex元素与clearfix有一个奇怪的空白? [英] Why inline-flex element with clearfix has a weird white space?
问题描述
在应用清除时,我有一个奇怪的行为 inline-flex
元素。当我为一个具有 inline-flex
显示属性的元素设置了一个clearfix时,会出现一个奇怪的空白区域:
但是当使用 inline-block
行为不同:
我不明白为什么 inline-flex
与 inline-block
..有不同的行为,为什么它有这么奇怪的空间。 p>
.a,.b {border:1px solid red;}。 -align:center;}。b {display:inline-flex; height:20px; width:20px;}。cf:before,.cf:after {content:; display:table;}。cf:after {clear:both;}
< div class =a> < div class =b cf>< / div>< / div>
display:inline-flex
display:inline-flex
,您将建立一个flex容器。
flex容器的初始设置为 flex-direction:row
。
这意味着容器的所有流的子元素-elements)将排成一行。这些子项的显示
值(在这种情况下为 table
)被覆盖/忽略, 弹性格式上下文 。
您的flex容器在一行中有两个flex项目(伪元素):
< div class =a> < div class =b cf>< / div>< / div>
b
display:inline-block
当您使用 display:inline-block
时,您需要建立 block formatting context 。
尊重子元素的显示
属性。
您的具有 display:table
的伪元素是块元素,默认情况下,它占用完整的可用宽度。因此,伪元素正在创建两行:
。 a,.b {border:1px solid red;}。a {text-align:center;} b {display:inline-block; height:20px; width:20px;}。cf:before,.cf:after {content:x; display:table;}。cf:after {clear:both;}
< div class =a> < div class =b cf>< / div>< / div>
b
vertical-align:baseline
因为你的代码的两个版本都使用内联级 display
值,所以调用了 vertical-align
属性,其初始值为 baseline
。
您在下面看到的空白区域如果设置为
display:inline-flex
是由于基准线对齐,则
当设置为 display:inline-block
时,您看到的下面的空白 div.b
这里有一个更详细的解释:: http://stackoverflow.com/a/36975280/3597276
清除
属性
.cf:{
clear:both;
}
您的clearfix方法不是任何空白的来源。
您只需使用 clear
属性即可
9.5.2控制浮动旁边的流程:
clear
property
此属性指示元素框
不仅在布局中没有浮动的元素,但是如果存在,则在flex格式化上下文中仍然会忽略 float
和 clear
属性。
3。 Flex容器:
flex
和inline-flex
display
values
float
和清除
不会创建浮动或清除flex项目
I have a weird behaviour of an inline-flex
element when applying a clearfix to it. When I set a clearfix to an element which has an inline-flex
display property the strange white space appears before it:
But when the inline-block
is used the behaviour is different:
I don't understand why inline-flex
has a different behaviour than inline-block
.. and why it has that weird space.
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-flex;
height: 20px;
width: 20px;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
<div class="a">
<div class="b cf"></div>
</div>
display: inline-flex
When you use display: inline-flex
, you establish a flex container.
An initial setting of a flex container is flex-direction: row
.
This means that all in-flow child elements of the container (including in-flow pseudo-elements) will line up in a row. The display
value of these children (table
, in this case) is overridden/ignored, in accordance with the rules of a flex formatting context.
Your flex container has two flex items (the pseudo-elements) in one line:
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-flex;
height: 20px;
width: 20px;
}
.cf:before,
.cf:after {
content: "x";
display: table;
}
.cf:after {
clear: both;
}
<div class="a">
<div class="b cf"></div>
</div>
display: inline-block
When you use display: inline-block
, you establish a block formatting context.
The display
property of child elements is respected.
Your pseudo-elements with display: table
are block elements which, by default, occupy the full available width. Hence, the pseudos are creating two rows:
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-block;
height: 20px;
width: 20px;
}
.cf:before,
.cf:after {
content: "x";
display: table;
}
.cf:after {
clear: both;
}
<div class="a">
<div class="b cf"></div>
</div>
vertical-align: baseline
Because both versions of your code use inline-level display
values, this calls into play the vertical-align
property, who's initial value is baseline
.
The white space you are seeing below div.b
when set to display: inline-flex
is due to baseline alignment.
The white space you are seeing below div.b
when set to display: inline-block
is due to baseline alignment in combination with the effects of two block element children.
Here is a more detailed explanation:: http://stackoverflow.com/a/36975280/3597276
The clear
property
.cf:after {
clear: both;
}
Your clearfix method is not the source of any of the white space. In fact, it's having no effect on your layout and can be safely removed.
You use the clear
property only when dealing with floats.
From the spec:
9.5.2 Controlling flow next to floats: the
clear
propertyThis property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.
Not only are there no floated elements in your layout, but if there were, the float
and clear
properties are nonetheless ignored in a flex formatting context.
3. Flex Containers: the
flex
andinline-flex
display values
float
andclear
do not create floating or clearance of flex item, and do not take it out-of-flow.
这篇关于为什么inline-flex元素与clearfix有一个奇怪的空白?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!