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

I can't count the number of times flexbox has made an otherwise painful design layout easy. My only qualm was having to calculate margins and paddings to space elements in a flex container. But now that gap has gotten good browser support, even that's no longer an issue.

But while it doesn't inconvenience me anywhere, it still surprises me.

Take the align-items property. When you have a row of items in a flex container, it controls how they line up in that row. I know how the most common values you'd give it work:

• stretch is the default value, and it makes each one the height of the tallest element in that row
• flex-start aligns each element to the top of that row
• flex-end aligns each element to the end of the row
• center aligns each element along the row's center axis

But an article I read mentioned the baseline value, and I didn't know that one. My own site's article listing is a flex container, so I threw on align-items: baseline out of curiosity.

The result...was unexpected.

Max Antonucci

@maxwell_dev

I'm not understand why flexbox's "align-item: baseline" is doing this. Can anyone explain it?

15:49 PM - 08 Oct 2021

This confused me since the results looked inconsistent. I was guessing flexbox was aligning things by a particular element. But I checked each element and nothing explained the alignment in each row. How could an alignment changed by a single rule give me such random results?

I did a few google searches to find out exactly how baseline aligns content. But I got explanations that were either too sparse or too jargon-filled. So like all confused people with little self-esteem and even less to lose, I turned to Twitter. And I actually got a good answer fast.

Bryan Robinson

@brob

@Maxwell_Dev Looks like it's aligning the first items' baselines. Images in the first row. Images + dates in the second row. Images again in the third row

16:00 PM - 08 Oct 2021

This was the simple answer I'd been looking for! Baseline takes the first element in each flex item, and lines things up by the bottom of that element.

This also explained the inconsistency! Posts in the first and third rows all have images, so it aligned the articles based on the bottoms of those. But the middle row has two posts without images, so it went by the element that was first instead: the dates. So while the alignment rule works, the different elements make it look inconsistent.

It also explains why the layout looks so wildly spaced in some areas. In the second post of the first row, the headline text is larger while the flex-basis is shorter. This pushes a lot of content below the baseline and creates those large gaps in the row.

All this has taught me a few good lessons about when I'd want to use align-items: baseline in the future.

1. It's good for content with some size variation. If you have images or text of different sizes, baseline always aligns them at the same point. So it can add some consistency where they may otherwise be none.
2. It's bad for content that has too many differences. It only looks at the first element and not any elements after it. My site has shown that having varying text or elements around a baseline can create lots of empty space.

My recommendation is to use baseline when your inconsistencies stay limited to the first element. Like for a list of cards that always started with headings, but you can't guarantee their font size.

As for my own site, I'm going to stick with align-items: stretch for now. Between optional featured images and different excerpt lengths, there's too much empty space.

But as with all things flexbox, this is good to know.

Featured image courtesy of this link.