Answers by Sentry

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>

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

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;

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

This will push the other items to the bottom.

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.