How to align item to the flex-end in the container using CSS ?

Last Updated : 27 May, 2024

Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items to the end of the main axis, aligning them to the right if it's a horizontal layout or to the bottom if it's vertical.

here are some common approaches:

Table of Content

Using align-items and display property
Using Align Self:
Using justify content property

Approach 1: Using align-items and display property

The align-items and display property of CSS are used to align items at the end of the container. To align items at the end of the container, we set the align-items value to flex-end and the display value to flex.

Syntax:

display:flex;
align-items: flex-end;

Example: In this example, we will align them to the flex end using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .gfg {
            border: solid 5px red;
            width: 50vh;
            height: 50vh;
            font-size: 50px;
            color: rgb(0, 167, 0);
            display: flex;
            align-items: flex-end;
        }
    </style>
</head>

<body>
    <div class="gfg">
        <div>GeeksforGeeks</div>
    </div>
</body>

</html>

Output:

align-item-to-the-flex-end-in-the-container-using-CSS

Approach 2 :Using Align Self:

The align-self property in CSS allows individual flex items to align themselves along the cross-axis within a flex container. Setting "align-self: flex-end;" aligns the selected item to the end of the cross-axis, overriding the container's default alignment behavior.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Align Self Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            height: 200px;
            border: 1px solid #ccc;
        }

        .item {
            width: 30%;
            padding: 10px;
            border: 1px solid #000;
        }

        .align-end {
            align-self: flex-end;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">Item 1</div>
        <br>
        <div class="item">Item 2</div>
        <br>
        <div class="item align-end">Item 3 (Aligned to End)</div>
    </div>

</body>

</html>

Output:

align-item-to-the-flex-end-in-the-container-using-CSS-2 — align item to the flex-end in the container using CSS Example Output

Approach 3 :Using justify content property

Using the "justify-content" property in CSS with the value "flex-end" aligns flex items to the end of the flex container along the main axis. This approach provides a simple way to align items without the need to modify individual item properties.

Example: In this example we demonstrates a flex container with a single item aligned to the end using Flexbox. The item's position is determined by the "justify-content: flex-end;" property.