{

CSS align content to bottom in flexbox example


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;
}
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.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.