Flexbox – aligning buttons in grid

The problem: You have two or three (or more) boxes in a row, each containing text above a button. Because each block of text is a slightly different length, depending on the screen width, the buttons are not always aligned.

The simple solution is to use Flexbox, but the problem is that the exact solution is not always so easy to find.

This is a bare bones solution. It requires three css classes.

  1. The Container
  2. The element (or box)
  3. The button, which sits inside the box.

The container needs to contain: display: flex;.
This will make all the DIVs inside the sontainer stretch to the size of the container.

The Box needs to contain:
display: flex;
flex-flow: column nowrap;

This will stop the elements from within the box forming their own columns. For example, without this, the H2 and P tagsn will sit side by side.

And to get the button to sit at the bottom you use this: margin-top. : auto;

The rest is just making it look pretty. Check out this simple example below.