Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to align item flex-end at the end of the container using CSS. The align-items and display property of CSS is used to align items at the end of the container.

Approach: 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:

Before applying the display and align-items property:

After applying the display and align-items property:


Last Updated : 08 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads