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

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;
}
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors