# CSS Align Div Content to Bottom with Flexbox

> Align content to the bottom of a div using CSS flexbox with align-items, flex-direction, justify-content, and margin-auto techniques for flexible layouts

**URL:** https://sentry.io/answers/how-to-align-content-of-a-div-to-the-bottom/

---

## The Problem

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

```html
<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`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property to "flex-end". The container should have a height.

```css
.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`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) property to "column" and justify the content to the end of the flexbox:

```css
  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](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_alignment/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`:

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

.item1 {
  margin-bottom: auto;
}
```

This will push the other items to the bottom.

## Further Reading

If you're looking to get a deeper understanding of how web performance optimization works, take a look at the following articles:

- [How to identify and fix Render-Blocking Resources](https://blog.sentry.io/how-to-id-fix-render-blocking-resources/)
- [5 easy tips to improve your personal website performance](https://blog.sentry.io/5-easy-tips-to-improve-your-personal-website-performance/)
- [Your background images might be causing CLS](https://blog.sentry.io/your-background-images-might-be-causing-cls/)
- [Sentry for JavaScript](https://docs.sentry.io/platforms/javascript/)
- [Frontend Monitoring](https://sentry.io/for/frontend/)
- [State of JS 2023 Reactions](https://syntax.fm/show/790/state-of-js-2023-reactions)

---

*Source: [sentry.io/answers/how-to-align-content-of-a-div-to-the-bottom/](https://sentry.io/answers/how-to-align-content-of-a-div-to-the-bottom/)*