Main navigation

Flexbox Alignment Tip

Recently I came across this neat little trick that allows you to vertically center an item across columns in a grid using flexbox. We have these little comparison cards on a recent client project. Normally on these cards we'd bottom align price + CTA. And we've been switching those to flexbox where possible. But before that we'd use JS to align them and set equal heights — I know ugly.

This new task was to not only keep the bottom alignment of the price + CTA, but also vertically center the product titles (relative to each other). I definitely didn't want to keep using JS to solve these problems. Mainly because they're not very good for performance. Luckily flexbox is able to take care of this problem.

We start off with setting display: flex on the card, with the flex-flow property set to column nowrap because we want the children to stack. The price and call-to-action can be bottom-aligned with a simple margin-top: auto. But we an also vertically center the title's with that same property.

I was amazed by how simple it was. No more JS to calculate heights, offsets, update margins, and redo all that work on resize.

Written by

James specializes in CSS architecture and development. Previously, he worked at Spectrum Brands for three years, working with designers to build out sites and features for their ecommerce sites and internal applications. He is a firm believer in mobile-first design and lean and scalable CSS. Outside of work he likes traveling, typography, and football (soccer).