Open In App
Related Articles

How flexible items can be of the same length regardless of its content in CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The flex property is used to set the length of flexible items regardless of their content in CSS. So to make flexible items to the same length, regardless of their content in CSS, we use the flex property. It takes three values first is flex-grow which specifies how many items will grow relative to the rest of the flexible items, the second is flex-shrink which specifies how many items will shrink relative to the rest of the flexible items, and the third is the length of the items. In this article, we will learn how flexible items are the same length, regardless of their content in CSS.

Syntax: 

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Example: In this example, we are using the flex property.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        center {
            margin: 50px;
            color: green;
            font-size: 60px;
        }
 
        .parent {
            display: flex;
            border: solid 3px red;
            width: 400px;
            height: 300px;
        }
 
        .parent div {
            flex: 1;
        }
 
        .gfg1 {
            background-color: wheat;
        }
 
        .gfg2 {
            background-color: rgb(197, 197, 197);
        }
 
        .gfg3 {
            background-color: azure;
        }
    </style>
</head>
 
<body>
    <center>
        <div class="parent">
            <div class="gfg1">Geeks</div>
            <div class="gfg2">for</div>
            <div class="gfg3">Geeks</div>
        </div>
    </center>
</body>
</html>

                    

Output:

Before applying the flex property:

After applying the flex property:



Last Updated : 24 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads