flex

Published Jul 23, 2021Updated Sep 3, 2021
Contribute to Docs

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>;
}

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;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy