Aligning Last Item to the Bottom of a Container in Flexbox

In a column based Flexbox layout you may want the last item to align to the bottom of the parent container – something you can achieve with the margin property – consider a simple column  layout but it is in a row of similar items but with varying amounts of text.

The ordered list has its initial layout controlled by a row flexbox layout and the list items are controlled by a column flexbox layout.

Containing ul tag flexbox CSS is…

ul {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
}

Markup for the list item is…

<li>
 <h3>Initial Consultation</h3>
 <p class="price"><sup>$</sup>100</p>
 <p class="details">Private health rebates apply.</p>
 <a class="button" href=""><p>Buy Now</p></a>
</li>

The Flexbox CSS for the li tag is…

li {
 display: flex;
 flex-flow: column nowrap;
}

This gives us…

flexbox-last-item

The alignment of items by default is flex-start but in this case this leaves the end of the box uneven, the closest alignment value would be space-between but this would also have layout issues, what you can to to force the last item to the bottom is to use margin-top:auto on it.

.button {
margin-top:auto;
}

Giving us…

flexbox-last-item-margin-top

Ref

4 Comments

  1. DC on March 3, 2017 at 3:15 pm

    Dude you are awesome!

  2. Kerry on February 19, 2017 at 6:03 am

    do you have a codepen for this?

Leave a Comment





%d bloggers like this: