How does baseline in flexbox works?


Can anyone kindly help I am not able to understand how the baseline value in align-items in CSS flexbox works?


There’s a couple good resources out there for explaining this (namely the MDN Docs and this W3C doc on flex which specifically discusses baselines.The simple answer is that the baseline is just the bottom of the text, so align-items: baseline; ensures that all of the elements are aligned based on the bottom of their content.

I have created a good codepen to demonstrate this. If we look at this, the starting position is with no align-items property on the container. As such, we can see that the flex elements are just taking up all the space available height-wise in their row, with the text being at the top of it’s container.

However, if we uncomment the align-items property, we can see a big change in how this works. Firstly, the box surrounding the elements have resized to just fit the content. This is because flex needs to determine the bottom of the content in order to actually align it properly. Then we can see that all the text has been aligned at the bottom of the largest number. This is because they’re aligning at the lowest possible baseline, which in this case will be that with the largest font-size. Thus the boxes look all over the place, but the content is perfectly aligned with each other which could be what you want from your elements.

The main use for this is when you have content blocks that have different sizes and amounts of content, but you want all the different elements to align from the bottom of the text. It may not come in handy too often, but having the option can be useful as it’s quite a hard thing to work around to without this flex option.

1 Like

Thank you for the explanation and the links. It really is pretty complex. :slight_smile: