How to Align Items to End Position using CSS ?

Last Updated : 25 Sep, 2023

To align elements to the end, you can use the CSS property justify-content: flex-end; in a flexbox container, and for aligning elements to the end vertically, you can use the CSS property align-items: flex-end; in a flexbox container. This property aligns the flex items along the cross-axis (vertical axis) of the container.

Here we are using these approaches with the help of basic examples:

Using Justify-content Property

In this approach we are using the justify-content: flex-end; CSS property aligns flex items to the end of the container, pushing them to the right side horizontally.

Syntax:

.container {
    display: flex;
    justify-content: flex-end;
}

Example: In this example, we create a flex container with three red boxes aligned to the right due to the “justify-content: flex-end” CSS property.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .container { 
            display: flex; 
            justify-content: flex-end; 
            height: 200px; 
            /* Just for demonstration */ 
            border: 1px solid black; 
            /* Just for demonstration */ 
        } 
  
        .item { 
            width: 50px; 
            height: 50px; 
            background-color: red; 
            margin: 5px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="item"></div> 
        <div class="item"></div> 
        <div class="item"></div> 
    </div> 
</body> 
  
</html>

Output:

Using align-item Property

In this approach align-items: flex-end is used to align flex items vertically at the bottom of a container. This property can be helpful if you want to align items in a flex container to the end of the cross-axis.

Syntax:

.container {
    display: flex;
    align-items: flex-end;
}

Example: in this example, three red boxes in a flex container, are vertically aligned at the bottom due to the “align-items: flex-end” CSS property.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .container { 
            display: flex; 
            align-items: flex-end; 
            height: 200px; 
            border: 1px solid black; 
        } 
  
        .item { 
            width: 50px; 
            height: 50px; 
            background-color: red; 
            margin: 5px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="item"></div> 
        <div class="item"></div> 
        <div class="item"></div> 
    </div> 
</body> 
  
</html>