How to Align an Element to Bottom with Flexbox in CSS?

Last Updated : 15 Nov, 2024

Here are different ways to align an element to bottom with Flexbox in CSS.

1. Using align-self Property

We can use the align-self: flex-end; property, which aligns the baseline of the flex item with the baseline of the last line of text in the flex container. This can be useful in cases where there are multiple lines of text in the container and you want to align a particular flex item with the bottommost line of text.

Syntax

align-self: flex-end;

HTML

<h3>Align an element to bottom with flexbox</h3>

<div style="width: 300px; height: 250px; 
            padding: 0.5rem; border: 2px solid black; 
            display: flex;">
    <p style="align-self: flex-end; width: 300px; 
              height: auto; padding: 0.5rem; 
              border: 2px solid black;">
        <b>Paragraph Element.</b> <br> A one-stop 
      	solution for CS/IT students to learn 
      	Programming Concepts, Data Structures & 
      	Algorithms, Coding Practice, etc
    </p>
</div>

Output

Using align-self

If we have multiple items inside a flexbox we can align the items to the bottom using flexbox in CSS:

2. Using flex-direction

We wrap all the elements in a div element except the last one and apply the justify-content property to align the items to bottom.

Syntax

flex-direction: column;
justify-content: space between;

HTML

<h3>Align an element to bottom with flexbox</h3>

<div style="width: 315px; height: 400px; 
            padding: 0.5rem; border: 2px solid black; 
            display: flex; flex-direction: column; 
            justify-content: space-between;">
    <div>
        <p style="height: 40px; padding: 0.5rem; 
                  border: 2px solid black;">
            <b>Paragraph Element 1.</b>
        </p>
        <p style="height: 40px; padding: 0.5rem; 
                  border: 2px solid black;">
            <b>Paragraph Element 2.</b>
        </p>
    </div>
    <p style="height: 40px; padding: 0.5rem; 
              border: 2px solid black;">
        <b>Paragraph Element 3.</b> <br>
        Element align at bottom.
    </p>
</div>

Output

Using flex-direction

3. Using align-items property

We use the align-items: flex-end; property to align elements at the bottom of the div.

Syntax

align-items: flex-end;

HTML

<h3>Align an element to bottom with flexbox</h3>

<div style="width: 315px; height: 300px; padding: 0.5rem; 
            border: 2px solid black; display: flex; 
            align-items: flex-end;">
    <p style="height: 100px; padding: 0.5rem; 
              margin: 0.1rem; border: 2px solid black;">
        <b>Paragraph Element 1.</b><br>
        Element align at bottom.
    </p>
    <p style="height: 100px; padding: 0.5rem; margin: 0.1rem; 
              border: 2px solid black;">
        <b>Paragraph Element 2.</b><br>
        Element align at bottom.
    </p>
    <p style="height: 100px; padding: 0.5rem; 
              margin: 0.1rem; border: 2px solid black;">
        <b>Paragraph Element 3.</b><br>
        Element align at bottom.
    </p>
</div>