Skip to main content

Flexbox Alignment Tip

Apr 14 '17
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.


DEMO: See the Pen Flex Alignment #2 by James Mejia (@mejiaj) on CodePen.

 

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.

Read more about: