Description
Some links to the specs:
- https://drafts.csswg.org/css-align/#baseline-rules
- https://drafts.csswg.org/css-flexbox/#flex-baselines
I've some doubts about how baseline alignment should work in the case of flex vs inline-flex.
Let's compare the behavior of block vs inline-block with flex vs inline-flex in the following examples.
<h2>Case 1)</h2>
foo
<div style="display: inline-block; margin-bottom: 50px;">
<div style="display: inline-block; width: 50px; height: 50px; background: magenta;">
</div>
</div>
bar
<div style="display: inline-block; margin-bottom: 50px;">
<div style="display: block; width: 50px; height: 50px; background: cyan;">
</div>
</div>
baz
For this example all browsers behave the same.
In this case the magenta box is an inline-block which determines the baseline of the outer box, so the 50px margin are not taking into account to compute the baseline.
However the cyan box is a block, in that case it's not used to compute the baseline, and the 50px margin on the outer box are taken into account for the baseline.
<h2>Case 2)</h2>
foo
<div style="display: inline-block; margin-bottom: 50px;">
<div style="display: inline-flex; width: 50px; height: 50px; background: magenta;">
</div>
</div>
bar
<div style="display: inline-block; margin-bottom: 50px;">
<div style="display: flex; width: 50px; height: 50px; background: cyan;">
</div>
</div>
baz
Here in Chromium/WebKit the flex case (cyan) behaves the same than the flex-inline (magenta). However in Firefox/Edge it works the same than the inline-block vs block case.
I believe Firefox/Edge are the ones right in this case.
But let's see what happens when we add one level more:
<h2>Case 3)</h2>
foo
<div style="display: inline-block; margin-bottom: 50px;">
<div style="display: inline-block;">
<div style="width: 50px; height: 50px; background: magenta;">
</div>
</div>
</div>
bar
<div style="display: inline-block; margin-bottom: 50px;">
<div style="display: block;">
<div style="width: 50px; height: 50px; background: cyan;">
</div>
</div>
</div>
baz
This still works the same than the case 1) and behavior is the same in all browsers.
But what happens with flexbox:
<h2>Case 4)</h2>
foo
<div style="display: inline-block; margin-bottom: 50px;">
<div style="display: inline-flex;">
<div style="width: 50px; height: 50px; background: magenta;">
</div>
</div>
</div>
bar
<div style="display: inline-block; margin-bottom: 50px;">
<div style="display: flex;">
<div style="width: 50px; height: 50px; background: cyan;">
</div>
</div>
</div>
baz
In this case all browsers mach again, and cyan box works the same than magenta box.
The 50px margin is not used to compute the baseline.
TBH, I'm not really sure why case 3) is different from 4). Or if behavior in 4) is right or not.
You can play with this examples live at: https://jsbin.com/tetatemiqo/1/edit?html,output