[csswg-drafts] [css-align][css-flex] Doubt about baseline alignment (#3416)

mrego has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-align][css-flex] Doubt about baseline alignment ==

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.

```html
<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
```

![Output of case 1)](https://user-images.githubusercontent.com/11602/49722008-f1978100-fc63-11e8-9e81-0f2d6c76d543.png)

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.

```html
<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
```

![Output of case 2)](https://user-images.githubusercontent.com/11602/49722040-0a079b80-fc64-11e8-89a0-499d69537cc8.png)

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:

```html
<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
```

![Output of case 3)](https://user-images.githubusercontent.com/11602/49722062-17bd2100-fc64-11e8-8246-f147306695ce.png)

This still works the same than the case 1) and behavior is the same in all browsers.

But what happens with flexbox:
```html
<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
```

![Output of case 4)](https://user-images.githubusercontent.com/11602/49722090-299ec400-fc64-11e8-8157-9679c2745ebf.png)

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3416 using your GitHub account

Received on Monday, 10 December 2018 09:14:11 UTC