Align Items at Bottom of Div Using CSS

Align Items at Bottom of Div Using CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 2 mins read

To align items at the bottom of a div element horizontally with other items using CSS, you can use the display: flex; property and the justify-content and align-items properties. The justify-content property specifies how the items in the flex container should be aligned along the main axis, which is the horizontal axis by default. The align-items property specifies how the items in the flex container should be aligned along the cross-axis, which is the vertical axis by default.

Align Items at Bottom of Div Example

Here is an example of how to align items at the bottom of a div element horizontally with other items using CSS:

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

In this example, the justify-content property is set to space-between, which means that the items in the flex container will be evenly distributed along the main axis, with equal amounts of space between the items. The align-items property is set to flex-end, which means that the items in the flex container will be aligned to the bottom of the div element along the cross axis.

Here is an example of how the CSS might be used to align a list of items at the bottom of a div element horizontally with other items:

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

And here is an example of what the output might look like:

Item 1     Item 2     Item 3     Item 4

In this example, the items are evenly distributed along the main axis, with equal amounts of space between the items. The items are also aligned to the bottom of the div element along the cross-axis.

Related: