[英]Why inline-flex element with clearfix has a weird white space?
I have a weird behaviour of an inline-flex
element when applying a clearfix to it. 当对它应用clearfix时,我有一个inline-flex
元素的奇怪行为。 When I set a clearfix to an element which has an inline-flex
display property the strange white space appears before it: 当我为具有inline-flex
显示属性的元素设置clearfix时,会出现奇怪的空格:
But when the inline-block
is used the behaviour is different: 但是当使用inline-block
,行为是不同的:
I don't understand why inline-flex
has a different behaviour than inline-block
.. and why it has that weird space. 我不明白为什么inline-flex
与inline-block
有不同的行为..为什么它有那么奇怪的空间。
.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. 使用display: inline-flex
,可以建立Flex容器。
An initial setting of a flex container is flex-direction: row
. Flex容器的初始设置是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. 这意味着容器的所有in-flow子元素(包括in-flow伪元素)将排成一行。 The display
value of these children ( table
, in this case) is overridden/ignored, in accordance with the rules of a flex formatting context . 根据flex格式上下文的规则,覆盖/忽略这些子项的display
值(在本例中为table
)。
Your flex container has two flex items (the pseudo-elements) in one line: 您的Flex容器在一行中有两个flex项(伪元素):
.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 . 使用display: inline-block
,可以建立块格式化上下文 。
The display
property of child elements is respected. 子元素的display
属性受到尊重。
Your pseudo-elements with display: table
are block elements which, by default, occupy the full available width. 带有display: table
伪元素是块元素,默认情况下占用整个可用宽度。 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
. 因为您的代码的两个版本都使用内联级别的display
值,所以这会调用vertical-align
属性,其初始值为baseline
。
The white space you are seeing below div.b
when set to display: inline-flex
is due to baseline alignment. 设置为display: inline-flex
时,您在div.b
下方看到的空白区域display: inline-flex
是由于基线对齐。
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 . 设置为display: inline-block
时,您在div.b
下方看到的空白区域display: inline-block
是由于基线对齐以及两个块元素子项的效果 。
Here is a more detailed explanation:: https://stackoverflow.com/a/36975280/3597276 这是一个更详细的解释:: https://stackoverflow.com/a/36975280/3597276
clear
property clear
财产 .cf:after {
clear: both;
}
Your clearfix method is not the source of any of the white space. 您的clearfix方法不是任何空格的来源。 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. 只有在处理浮点数时才使用clear
属性。
From the spec: 从规格:
9.5.2 Controlling flow next to floats: the
clear
property 9.5.2控制浮子旁边的流量:clear
属性This 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. 不仅布局中没有浮动元素,但如果有, float
和clear
属性仍会在flex格式化上下文中被忽略。
3. Flex Containers: the
flex
andinline-flex
display values 3. Flex Containers:flex
和inline-flex
显示值
float
andclear
do not create floating or clearance of flex item, and do not take it out-of-flow.float
和clear
不会产生弹性物品的浮动或间隙,也不会使其脱离流动。
Try set a verical-align: top;
尝试设置verical-align: top;
to your inline-flex | inline-block
到你的inline-flex | inline-block
inline-flex | inline-block
element to fix this offset. 用于修复此偏移的inline-flex | inline-block
元素。
https://jsfiddle.net/jeca65my/2/ https://jsfiddle.net/jeca65my/2/
Thank's to @NenadVracar on this solution 感谢@NenadVracar 对此解决方案的看法
You have to imagine your page as a flow
. 您必须将您的页面想象成一个flow
。 Every element of your page is in the flow (DOM). 页面的每个元素都在流(DOM)中。 You are using the position property to change the position in the flow. 您正在使用position属性来更改流中的位置。
block 块
A block element will Always start a new line. 块元素将始终开始一个新行。 (ie: div) (即:div)
inline-block 内联块
Inline blocks elements are blocks like div
but with inline
properties in it. 内联块元素是div
类的块,但其中包含inline
属性。 (ie: span) (即:跨度)
inline-flex 内嵌-FLEX
This is used the same way as inline-block
in the flow. 这与流中的inline-block
使用的方式相同。 It makes a container that is inline
but with the flex
layout. 它使一个inline
但具有flex
布局的容器。
For your example, an interesting thing to do in order to focus on the difference between inline-block
and inline-flex
is to add text in your child div. 对于您的示例,为了专注于inline-block
和inline-flex
之间的区别,有趣的事情是在子div中添加文本。 You'll see that the comportment of your child div will once again change because it has text in it. 您将看到您的子div的组合将再次更改,因为它中包含文本。 JSFiddle example JSFiddle示例
EDIT : I found a sentence on SO that resumes well the situation. 编辑:我发现了一个关于SO的句子,恢复了良好的状态。 thank's to @BoltClock on This post : 感谢@BoltClock对这篇文章 :
display: inline-flex does not make flex items display inline. display:inline-flex不会使flex项显示为内联。 It makes the flex container display inline. 它使Flex容器显示为内联。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.