Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 12 May, 2021

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 flex property. It takes three values first is flex-grow that specifies how many items will grow relative to the rest of the flexible items, the second is flex-shrink that 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 the flexible items are the same length, regardless of their content in CSS.

Syntax: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Example:



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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :