How to Position Element to Bottom of Its Container with CSS Flex

A multi-row layout where we need to place an element to the bottom of its parent container can be created easily using CSS flex. The trick is to set margin-top: auto for the last element so that the top margin is automatically set as the per the remaining space left.

Example

HTML & CSS

<div id="parent">
	<div id="first">One</div>
	<div id="second">Two</div>
	<div id="three">Three</div>
	<div id="last">Last</div>
</div>

/* parent has an specific height */
#parent {
	display: flex;
	flex-direction: column;
	height: 50vh;
}

/* just giving space for demonstration */
#second, #three {
	margin-top: 20px;
}

/* set aut margin for last element */
#last {
	margin-top: auto;
}