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 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
There are multiple ways we can align to bottom elements in CSS flexbox.
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.
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;
}
🧮 Tags
Recent posts
How to Convert String to Int in swift with example How to Split a String by separator into An array ub swift with example How to disable unused code warnings in Rust example Golang Tutorials - Beginner guide Slice Examples Golang Array tutorials with examplesRelated posts