CSS flex

The flex property is a shorthand that combines the flex-grow, flex-shrink, and flex-basis properties. This syntax allows for the concise delineation of flex item parameters with one line of code.

Syntax

#item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

Copy to clipboard
Copy to clipboard

The values can be any of the following options:

• A keyword: auto
• A length: 200px
• An integer or decimal: 1 , .5

flex-shrink and flex-basis are optional.

Default values are 0 1 auto.

Example 1

An element that will occupy twice the space as other items in the same container:

#item-foo {
  flex: 2 0 auto;
}

Copy to clipboard
Copy to clipboard