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: 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
Share your thoughts in the comments
Please Login to comment...