DEV Community

Discussion on: What's the deal with align-items: baseline?

Collapse
alohci profile image
Nicholas Stimpson

Baseline takes the first element in each flex item, and lines things up by the bottom of that element.

That's not quite correct. Consider this:

You can see that despite the two div flex items having identical content, and their container having align-items:baseline, they do not align with one another. That's because the first element img of the first flex item is inline, while the one in the second item is a block.

If the definition you used was correct, that wouldn't matter.

A better definition would be:

Baseline takes the first line box in each flex item, and lines things up by the baseline of that line box.

The img in the second flex item, being display:block, does not establish a line box, so the first line box there is established by the text, and it's that which aligns with the baseline of the img element in the first flex item.