Align an element to centre bottom of each flexbox

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

Here are two methods:

Nested Flexbox

.col {
    flex: 1;
    display: flex;                 /* create nested flex container */
    flex-wrap: wrap;               /* enable flex items to wrap */ 
    justify-content: center;       /* center flex items on each line */
}

.col > a { align-self: flex-end; } /* position link always at bottom */

DEMO 1

---

Absolute Positioning

.col {
    flex: 1;
    position: relative;      /* establish containing block (nearest positioned ancestor)
                                for absolute positioning */
}

.col > a {
    position: absolute;
    bottom: 5px;                 /* adjust this value to move link up or down */
    left: 50%;                   /* center link horizontally */
    transform: translateX(-50%); /* center link horizontally */
}

DEMO 2

---

A third method involves switching the flex-direction to column. In some cases, however, changing the flex direction isn't an acceptable option, as it changes the behavior of the layout. (This method isn't detailed here as it is already posted in another answer.)

Answer 2

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