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>

Output:

How to Align One Item to the Right using CSS Flexbox ?

princejai9073

Improve

Article Tags :

How to Align Items to End Position using CSS ?

Table of Content

Using Justify-content Property

Using align-item Property

Similar Reads

Thank You!

What kind of Experience do you want to share?