CSS - flex-grow

Quiz

Description

The CSS Flexbox property flex-grow determines how much an item within a flex container should expand to fill available space along the main axis.

The flex-grow property takes a numeric value that indicates how much of the extra space within the flex container a flex item should occupy proportionally.

Possible Values

integer value - Any valid integer value.

Applies to

All the HTML elements.

DOM Syntax

flex-grow: any integer value;

Here is the example which shows effect of this property −

<html>
<head>
<style>
   .my_flex_grow {
      display: flex;
      background-color: #0ca14a;
   }
   .my_flex_grow div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my_flex_grow">
      <div style="flex-grow: 3">Flex item 1</div>
      <div style="flex-grow: 1">Flex item 2</div>
      <div style="flex-grow: 6">Flex item 3</div>
   </div>
</body>
</html>

Print Page