flex

christian.dinh2481 total contributions
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
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- Anonymous contributorAnonymous contributor88 total contributions
- christian.dinh
- Anonymous contributor
- Anonymous contributor
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.