DEV Community

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

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.