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

<style>
  .flex-container1 {
    display: flex;
    border: 1px solid black;
    height: 150px;
    width: 150px;
    flex-direction: column;
  }
</style>
<div class="flex-container1">
  <div>heading 1</div>
  <div>heading 2</div>
  <div>heading 3</div>
  <button class="button">Button</button>
</div>

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.

<style>
  .flex-container {
    display: flex;
    border: 1px solid black;
    height: 150px;
    width: 150px;
    flex-direction: column;
  }
  .button2_1 {
    display: flex;
    flex-grow: 1;
  }
</style>
<div class="flex-container">
  <div>heading 1</div>
  <div>heading 2</div>
  <div>heading 3</div>
  <button class="button2_1">Button</button>
</div>

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