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

css
Published on May 6, 2020

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

One
Two
Three
Last

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;
}
Related Tutorials
How to Align Column DIVs as Left-Center-Right with CSS Flex
Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)
How to Create LEFT-RIGHT Alignment of Containers with CSS Flex
Comments
Loading Comments