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.

Join the discussionCome work with us
Share on Twitter
Bookmark this page
Ask a questionImprove this Answer

Related Answers

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

© 2023 • Sentry is a registered Trademark
of Functional Software, Inc.