How to align content of a div to the bottom

Matthew C.

The Problem

You have a <div> with content, for example, a container with two items:

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
</div>
Click to Copy

You want to align the content of the div to the bottom of the container. How do you do this?

The Solution

You can make the container a flex container and then align the items to the bottom by setting the align-items property to “flex-end”. The container should have a height.

.container {
  height: 350px;
  display: flex;
  align-items: flex-end;
}
Click to Copy

If you want the main axis of the flex container, which is the direction that the flex items are laid out in, to be going down the page, you can change the flex-direction property to “column” and justify the content to the end of the flexbox:

  flex-direction: column;
  justify-content: flex-end;
Click to Copy

Note that you can’t justify individual flex items by setting justify-self: flex-end; because there is no justify-self in Flexbox.

If you want to move all of the flex items down except the first flex item, you can set the margin-bottom of the first item to auto:

.container {
  height: 350px;
  display: flex;
  flex-direction: column;
}

.item1 {
  margin-bottom: auto;
}
Click to Copy

This will push the other items to the bottom.