Skip to content
Related Articles

Related Articles

How to align item to the flex-end in the container using CSS ?
  • Last Updated : 06 Apr, 2021

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:

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 display and align-items property:

After applying display and align-items property:

My Personal Notes arrow_drop_up
Recommended Articles
Page :