CSS flex Property

The flex property specifies the components of a flexible length. It is a shorthand property for flex-grow, flex-shrink and flex-basis properties. The flex-shrink and flex-basis are optional, i.e. you don’t have to include them in the flex declaration.

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

When you do not include flex-grow property in the shorthand declaration, the value is set to 1 by default. When you do not include flex-shrink property in the shorthand declaration, the value is set to 1 by default. Note, that the flex-shrink factor is multiplied by the flex-basis when negative space is distributed. When the flex-basis property is not included, its value is set to 0%.

"Auto" is the default value of the flex property. This value sizes the item based on the width/height properties. (If the item’s main size property computes to "auto", this will size the flex item based on its contents.)

"Initial" sizes the item based on its width/height properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or auto margins can be used to align flex items along the main axis.

"None" is sized according to its width and height properties. It is fully inflexible.

Note: The initial values of flex-grow and flex-shrink properties 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

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

Example

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <style> 
      .box {
      width: 350px;
      height: 200px;
      padding-left: 0;
      list-style-type: none;	
      border: 1px dashed black;
      display: -webkit-flex;
      display: flex;
      }
      .box div {
      flex: 1;
      }
      .green {background-color: #8ebf42}
      .blue {background-color: #1c87c9;}
      .gray {background-color: #666}
    </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>

Example where one of the items grows.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      /* Safari 6.1+ */
      .box div:nth-of-type(1) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(2) {-webkit-flex-grow: 4;}
      .box div:nth-of-type(3) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(4) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(5) {-webkit-flex-grow: 1;}
      /* Standard syntax */
      .example div:nth-of-type(1) {flex-grow: 1;}
      .example div:nth-of-type(2) {flex-grow: 4;}
      .example div:nth-of-type(3) {flex-grow: 1;}
      .example div:nth-of-type(4) {flex-grow: 1;}
      .example 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>

Another example with flex-shrink and flex-shrink values are included.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      .box div {
      -webkit-flex-grow: 1; /* Safari 6.1+ */
      -webkit-flex-shrink: 2; /* Safari 6.1+ */
      -webkit-flex-basis: 100px; /* Safari 6.1+ */
      flex-grow: 1;
      flex-shrink: 2;
      flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
      -webkit-flex-shrink: 5; /* Safari 6.1+ */
      flex-shrink: 5;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink 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>

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.

Browser support

29.0+
21-28 -webkit-
12.0+ 28.0+ 9.0+
6.1-8.0 -webkit-
12.1+




Related articles