How to align an element to bottom with flexbox in CSS ?

Last Updated : 14 Mar, 2023

CSS Flexbox display: flex property allows you to align the items according to the requirements. You can easily align and distribute elements within a container using flexbox along a single axis or across both axes. Flexbox is a powerful and flexible tool for creating complex layouts that do not rely on float or position properties.

There are several properties that can be used in order to align an element bottom with a flexbox. we will discuss a few approaches to align an element to the bottom.

When the display: flex property is applied on any element that will act as a flex container and the elements which are inside this element will act as flex items.

Approach 1: In the very first approach, we will use align-self: last baseline; 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.

This approach will only work in case you only have one flex item in the flex container. Let’s see an example of that.

Example: Using the align-self: last baseline property on the flex item. In the below example, we have a flex container <div> and inside our flex container, only a single element <p> is there.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <style> 
        #con { 
            width: 300px; 
            height: 250px; 
            padding: 0.5rem; 
            background-color: rgba(128, 255, 0, 0.292); 
            display: flex; 
        } 
  
        #ele { 
            align-self: last baseline; 
            width: 300px; 
            height: auto; 
            padding: 0.5rem; 
            background-color: rgba(163, 42, 165, 0.437); 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3> Align an element to bottom with flexbox </h3> 
  
    <div id="con"> 
        <p id="ele"> 
            <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> 
</body> 
  
</html> 

Output:

Approach 2: Assuming that we have multiple flex items within the flex container and we only want to align the last element at the bottom and the rest of them should be at the top only. We can do it by wrapping all the elements in a div element except the last one. The following properties will help further:

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

Example: Let’s create some paragraph elements inside our flex container and wrap all the paragraph elements inside an <div> except the last one and apply the above-discussed properties:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <style> 
        #con { 
            width: 315px; 
            height: 400px; 
            padding: 0.5rem; 
            background-color: rgba(128, 255, 0, 0.292); 
            display: flex; 
            flex-direction: column; 
            justify-content: space-between; 
        } 
  
        #ele1, 
        #ele2, 
        #ele3 { 
            width: 300px; 
            height: 40px; 
            padding: 0.5rem; 
            background-color: rgba(163, 42, 165, 0.437); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3> Align an element to bottom with flexbox </h3> 
  
    <div id="con"> 
        <div> 
            <p id="ele1"> 
                <b>Paragraph Element 1.</b> 
            </p> 
            <p id="ele2"> 
                <b>Paragraph Element 2.</b> 
            </p> 
        </div> 
        <p id="ele3"> 
            <b>Paragraph Element 3.</b> <br> 
            Element align at bottom. 
        </p> 
    </div> 
</body> 
  
</html> 

Output:

Approach 3: Assuming we have multiple elements within the flex container and we want to align each element at the bottom of the flex container. use the align-items: flex-end; property and align elements at the bottom:

Example: Using align-items: flex-end; property and the flex-direction is row.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <style> 
        #con { 
  
            width: 315px; 
            height: 300px; 
            padding: 0.5rem; 
            background-color: rgba(128, 255, 0, 0.292); 
            display: flex; 
            align-items: flex-end; 
        } 
  
        #ele1, 
        #ele2, 
        #ele3 { 
            width: auto; 
            height: 100px; 
            padding: 0.5rem; 
            margin: 0.1rem; 
            background-color: rgba(163, 42, 165, 0.437); 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3> Align an element to bottom with flexbox </h3> 
  
    <div id="con"> 
  
        <p id="ele1"> 
            <b>Paragraph Element 1.</b><br> 
            Element align at bottom. 
        </p> 
        <p id="ele2"> 
            <b>Paragraph Element 2.</b><br> 
            Element align at bottom. 
        </p> 
        <p id="ele3"> 
            <b>Paragraph Element 3.</b> <br> 
            Element align at bottom. 
        </p> 
    </div> 
</body> 
  
</html> 