{

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 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

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

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 the 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.