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;}
Contributors
- Anonymous contributors