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>
JSFiddle Demo
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:: https://stackoverflow.com/a/36975280/3597276
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.
Try set a verical-align: top;
to your inline-flex | inline-block
element to fix this offset.
https://jsfiddle.net/jeca65my/2/
Thank's to @NenadVracar on this solution
You have to imagine your page as a flow
. Every element of your page is in the flow (DOM). You are using the position property to change the position in the flow.
block
A block element will Always start a new line. (ie: div)
inline-block
Inline blocks elements are blocks like div
but with inline
properties in it. (ie: span)
inline-flex
This is used the same way as inline-block
in the flow. It makes a container that is inline
but with the flex
layout.
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. You'll see that the comportment of your child div will once again change because it has text in it. JSFiddle example
EDIT : I found a sentence on SO that resumes well the situation. thank's to @BoltClock on This post :
display: inline-flex does not make flex items display inline. It makes the flex container display inline.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With