How to align item set to its default value in CSS ?
Last Updated :
24 May, 2023
In this article, we will learn how to align an item set to its default value in CSS.
Approach: The align-items property is used to set the alignment of items inside the flexible container or in the given window. It takes value. The initial value is used to set this property value to the default value. So we set the align-items property value to initial.
Syntax:
align-items : initial;
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
font-size: 30px;
width: 320px;
height: 200px;
border: 2px solid black;
display: flex-end;
align-items: initial;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<div class="gfg">
<div style="background-color:green;">
Green
</div>
<div style="background-color:Yellow;">
Yellow
</div>
</div>
</center>
</body>
</html>
|
Output:
Approach: Using align-item: stretch In CSS, the “align-items: stretch” property is used to stretch the items inside of a container to fill the container’s entire height. The “align-items” property in a flex container has this default value.
Syntax:
align-items: stretch;
Example: Here we are using the above approach.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
font-size: 30px;
width: 320px;
height: 200px;
border: 2px solid black;
display: flex;
align-items: stretch;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<div class="gfg">
<div style="background-color:green;">
Green
</div>
<div style="background-color:Yellow;">
Yellow
</div>
</div>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...