Align an element to centre bottom of each flexbox

This question already has an answer here:

I have 3 divs that are side by side using display: flex.

The content in these divs are of varying height, but what I would like is to create a link in each that is always positioned at the bottom.

----------- ----------- -----------
| img | | img | | img |
| heading 1 | | heading 3 | | heading 3 |
| paragraph | | paragraph | | paragraph |
| paragraph | | | | paragraph |
| | | | | paragraph |
| link | | link | | link |
 ----------- ----------- -----------

This way the links will always appear lined up.

JSFiddle code


solution

You could change the display of .content to flex, then add flex-direction: column in order to make the content flow from top to bottom. In order to position the child anchor element at the bottom, simply add add margin-top: auto to it:

Updated Example

.content {
  display: flex;
  flex-direction: column;
}
.content a {
  margin-top: auto;
}