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>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…
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…
