Align an element to centre bottom of each flexbox [duplicate]

Question

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

Answer 1

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;
}