CSS flex Property

The flex property defines the components of a flexible length. It is a shorthand for the following properties:

All three components are optional in the shorthand declaration. When omitted, flex-grow defaults to 1, flex-shrink defaults to 1, and flex-basis defaults to auto. Note that the flex-shrink factor is multiplied by the flex-basis value when distributing negative space.

The flex property is one of the CSS3 properties.

This property is a part of the Flexible Box Layout module. If there are no flexible items, the flex property won't have any effect.

The auto keyword is equivalent to 1 1 auto. It sizes the item based on the width/height properties. If the item’s main size property is set to auto, this will size the flex item based on its contents.

The initial keyword is equivalent to 1 0 auto. It sizes the item based on its width/height properties (or its content if not set). This makes the flex item inflexible when there is free space left, and it will not shrink when there is not enough space. The alignment techniques or auto margins are used for aligning the flex items along the main axis.

The none keyword is equivalent to 0 0 auto. It sizes the item according to the width and height properties. It is fully inflexible.

Info

Note: The initial values of flex-grow and flex-shrink differ from their default values when they are not included in the flex shorthand declaration so that it can better accommodate common cases.

Initial Value	0 1 auto
Applies to	Flex items, including in-flow pseudo-elements.
Inherited	No.
Animatable	Yes.
Version	CSS3
DOM Syntax	Object.style.flex = "1";

Syntax

Syntax of CSS flex Property

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

The values can be specified in any order. When using flex-basis, you can also apply min-width or min-height constraints to prevent the item from shrinking below a specified size.

Example of the flex property:

Example of CSS flex Property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 350px;
        height: 200px;
        padding-left: 0;
        list-style-type: none;
        border: 1px dashed black;
        display: flex;
      }
      .box div {
        flex: 1;
      }
      .green {
        background-color: #8ebf42;
      }
      .blue {
        background-color: #1c87c9;
      }
      .gray {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Flex property example</h2>
    <div class="box">
      <div class="green">GREEN</div>
      <div class="blue">BLUE</div>
      <div class="gray">GRAY</div>
    </div>
  </body>
</html>

Try it Yourself »

Result

Example of the flex property with the "flex-grow" value:

Example of CSS flex Property with flex-grow value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px solid #666;
        display: flex;
      }
      .box div:nth-of-type(1) {
        flex-grow: 1;
      }
      .box div:nth-of-type(2) {
        flex-grow: 4;
      }
      .box div:nth-of-type(3) {
        flex-grow: 1;
      }
      .box div:nth-of-type(4) {
        flex-grow: 1;
      }
      .box div:nth-of-type(5) {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <h2>Flex-grow example</h2>
    <div class="box">
      <div style="background-color: #eee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #ccc;"></div>
      <div style="background-color: #666;"></div>
    </div>
  </body>
</html>

Try it Yourself »

Example of the flex property with the "flex-shrink" value:

Example of CSS flex Property with flex-shrink value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 2;
        flex-basis: 100px;
      }
      
      .box div:nth-of-type(2) {
        flex-shrink: 5;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
flex-grow	Specifies how much the item will grow relative to the rest of the flexible items of the same container.
flex-shrink	Specifies how much the item will shrink relative to the rest of the flexible items of the same container.
flex-basis	Specifies the length of the item by "auto", "inherit", or a number followed by "%", "px", "em", etc.
auto	Equivalent to 1 1 auto.
initial	Equivalent to 1 0 auto.
none	Equivalent to 0 0 auto.
inherit	Inherits this property from its parent element.

Syntax

Example of the flex property:

Result

Example of the flex property with the "flex-grow" value:

Example of the flex property with the "flex-shrink" value:

Values

Practice