smally smally - 4 years ago 133
HTML Question

Align an element to centre bottom of each flexbox

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 Source

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.)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download