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 a 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 a flex container with a display:flex
.flex-container{
display:flex;
border:1px solid black;
height:150px;
width: 150px;
flex-direction: column;
}
Render the flex container on the 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 a 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 the 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 the bottom.
.flex-container{
display:flex;
border:1px solid black;
height:150px;
width: 150px;
flex-direction: column;
}
.button{
margin-top: auto;
}
🧮 Tags
Recent posts
Julia examples - Variable Type Nim example - Convert String to/from the Int How to get length of an array and sequence in Nim? Nim environment variables - read, set, delete, exists, and iterate examples? How to convert from single character to/from string in Nim?Related posts