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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.