THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
This tutorial shows multiple ways to align elements or content to the bottom in the CSS flexbox with examples.
Let’s create an flex with child items in html
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<div class="flex-container">
<div>heading 1</div>
<div>heading 2</div>
<div>heading 3</div>
<button class="button">Button</button>
</div>
</body>
</html>
Here is an flex container with display:flex
.flex-container{
display:flex;
border:1px solid black;
height:150px;
width: 150px;
flex-direction: column;
}
Render the flex container on browser as seen below
heading 1
heading 2
heading 3
There are multiple ways we can align to bottom elements in CSS flexbox.
- use flex-grow property
flex-grow makes the element takes available space in the flexbox container.
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<div class="flex-container">
<div>heading 1</div>
<div>heading 2</div>
<div>heading 3</div>
<button class="button">Button</button>
</div>
</body>
</html>
Here is an flex container with display:flex and flex-group to child bottom element
.flex-container{
display:flex;
border:1px solid black;
height:150px;
width: 150px;
flex-direction: column;
}
.button{
display: flex;
flex-grow: 1;
}
The button is aligned to bottom.
heading 1
heading 2
heading 3
- use auto margins to make the bottom child element
Add the container with flex:1 and child element with margin-top: auto or margin-top: auto;
margin top or bottom auto makes push the element to bottom.
.flex-container{
display:flex;
border:1px solid black;
height:150px;
width: 150px;
flex-direction: column;
}
.button{
margin-top: auto;
}
