Aligning Last Item to the Bottom of a Container in Flexbox

February 15, 2017 -

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>100</sup></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

Working example

Related Posts:

Categorized CSS Tagged

16 Comments

  1. Olaf on November 9, 2022 at 1:36 pm

    Thank you very much! This is amazing and so simple to use if you know about it, very great!

    Reply
  2. Rodrigo on January 31, 2022 at 2:50 pm

    That’s very interesting! Nice solution! Thank you

    Reply
  3. Alex on October 16, 2020 at 6:42 am

    I have struggled with this a few times before and fix it various ways and I can never remember which one works the best, but without a doubt this is the absolute best way to handle it.

    Bravo!

    Reply
  4. Abdullah on June 13, 2020 at 6:16 pm

    Thanks won’t be enough.
    You just save my day.

    Reply
  5. Yuksel Beyti on May 7, 2020 at 10:01 am

    Thank you very much. you’ve helped me a lot :)

    Reply
  6. Paul on May 22, 2019 at 9:32 am

    save my day. It is weird why I couldn’t do with:
    – set flex-direction column to parent
    – set a max-height for child (otherwise, with flex, that would grow)
    – set align-self to bottom of child

    Reply
  7. Tarik on March 21, 2019 at 5:58 am

    Thank you so much.

    Reply
  8. Panda on May 10, 2018 at 11:28 pm

    It can be done by flex: auto; and flex: none;
    Set details with flex: auto; and the rest with flex: none. It should works too :)
    Anyway margint-top is a nice trick.

    Reply
  9. AshLingua on April 23, 2018 at 4:29 pm

    thanks for this! I was stuck trying to figure this out

    Reply
  10. Justin on December 11, 2017 at 6:46 pm

    The working example link no longer works. Can you please repost it? Does this solution work in IE11?

    Reply
  11. Eo on December 10, 2017 at 3:02 pm

    Awesome!
    Just in case someone needs a reference (http://jsbin.com/najodugoce/edit?html,css,output)

    Reply
  12. DC on March 3, 2017 at 3:15 pm

    Dude you are awesome!

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

    do you have a codepen for this?

    Reply

Leave all Comment