CSS Flexbox - flex-grow Property

CSS flex-grow property determines how much extra space a flex item should take up in the flex container along its main axis.

Excess space in a flex container, when larger than the combined sizes of flex items, is distributed based on each item's growth factor as a proportion of the sum total of all items' flex grow factors.

Possible Values

  • <number> - Any valid positive number. Negative values are not valid.

Applies to

Flex items, including in-flow pseudo-elements

Syntax

flex-grow: <number>;

CSS flex-grow - <number>

The following example demonstrates that flex-grow: 3 property grows the first flex item three times as much as the other items −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
   .flex-item1 {
      flex-grow: 3;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>
Advertisements