How to use Justify-content Property In CSS

Using align-item 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:

How to Align Items to End Position using CSS ?

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: