Horje
How to align item set to its default value in CSS ?

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:

 


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How to set the overflow property to scroll in CSS ? How to set the overflow property to scroll in CSS ?
How to draw an ellipse using CSS ? How to draw an ellipse using CSS ?
How to define where to navigate when using the arrow keys in CSS ? How to define where to navigate when using the arrow keys in CSS ?
How to change svg icon colors with Tailwind CSS ? How to change svg icon colors with Tailwind CSS ?
How to set different type of cursors using CSS ? How to set different type of cursors using CSS ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje