TL;DR: see proposals and comparison
<!DOCTYPE html>
<div style="width: 200px; justify-items: right; border: solid">
foo
</div>
<div style="width: 200px; justify-items: right; border: solid">
foo
<div></div>
</div>
In Blink it looks like this:
In the 1st case, there is no block-level child to align. In the 2nd case, "foo" gets wrapped inside an anonymous block, which is then aligned by justify-items: right.
But it seems potentially unexpected that appending a block affects the alignment of the inline contents.
Maybe anonymous blocks should get assigned justify-self: startjustify-self: stretch (or normal)?
TL;DR: see proposals and comparison
In Blink it looks like this:
In the 1st case, there is no block-level child to align. In the 2nd case, "foo" gets wrapped inside an anonymous block, which is then aligned by
justify-items: right.But it seems potentially unexpected that appending a block affects the alignment of the inline contents.
Maybe anonymous blocks should get assigned
justify-self: startjustify-self: stretch(ornormal)?