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

Last Updated : 24 May, 2023

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>