Controlling the Dimensions of Flex Items in CSS


To control the dimensions of Flex Items in CSS, use the flex property. Consider flex as the length on flexible items. The flex includes the following properties −

  • flex-grow − A number is set for the flex grow factor i.e., how much the item will grow relative to the other flexible items.

  • flex-shrink − A number is set for the flex skrink factor i.e., how much the item will shrink relative to the other flexible items.

  • flex-basis − The initial size of a flex item.

Control the Dimensions of Flex Items With the Shorthand Property

We have set the shorthand property for the flex items. Here, we have values for flex-grow, flex-shrink, and flex-basis −

flex: 2 1 auto;

Example

The following is the code controlling the dimensions of flex items −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .container {
         display: flex;
         width: 100%;
      }
      div {
         width: 200px;
         height: 200px;
         color: white;
         text-align: center;
         font-size: 30px;
      }
      .first {
         background-color: rgb(55, 0, 255);
         flex: 2 1 auto;
      }
      .second {
         background-color: red;
      }
      .third {
         background-color: rgb(140, 0, 255);
      }
   </style>
</head>
<body>
   <h1>Controlling flex items dimesions</h1>
   <div class="container">
      <div class="first">First Div</div>
      <div class="second">Second Div</div>
      <div class="third">Third Div</div>
   </div>
</body>
</html>

Control the Dimensions of Flex Items With a Single Value

If a single value without a unit is set for the flex, then it is for the flex-grow property as shown below −

flex: 1;

Example

Let us see an example to control the dimensions of flex items with a single value −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .container {
         display: flex;
         width: 100%;
      }
      div {
         width: 200px;
         height: 200px;
         color: white;
         text-align: center;
         font-size: 30px;
      }
      .first {
         background-color: rgb(55, 0, 255);
         flex: 1;
      }
      .second {
         background-color: red;
      }
      .third {
         background-color: rgb(140, 0, 255);
      }
   </style>
</head>
<body>
   <h1>Control the Dimensions of flex items with a single value</h1>
   <div class="container">
      <div class="first">First Div</div>
      <div class="second">Second Div</div>
      <div class="third">Third Div</div>
   </div>
</body>
</html>

Control the Dimensions of Flex Items With two Values

If two values without a unit is set for the flex, then it is for the flex-grow and flex-shrink property as shown below −

flex: 2 2;

Example

Let us see an example to control the dimensions of flex items −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .container {
         display: flex;
         width: 100%;
      }
      div {
         width: 200px;
         height: 200px;
         color: white;
         text-align: center;
         font-size: 30px;
      }
      .first {
         background-color: rgb(55, 0, 255);
         flex: 2 2;
      }
      .second {
         background-color: red;
      }
      .third {
         background-color: rgb(140, 0, 255);
      }
   </style>
</head>
<body>
   <h1>Control the Dimensions of flex items with two values</h1>
   <div class="container">
      <div class="first">First Div</div>
      <div class="second">Second Div</div>
      <div class="third">Third Div</div>
   </div>
</body>
</html>

Updated on: 30-Oct-2023

84 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements