How to align item to the flex-end in the container using CSS ?
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:
Please Login to comment...