Flex shorthand property
2 May 2023 (Updated 2 May 2023)
The flex
property can have one of three keyword values:
- initial
auto
none
initial (flex: 0 1 auto)
- Growth: Doesn’t grow to absorb extra free space in the flex container.
- Shrinking: Shrinks to its minimum size to fit in the flex container.
- Sizing: The item is sized according to its
width
andheight
properties. - Equivalent to
flex: 0 1 auto
auto (flex: 1 1 auto)
- Growth: Grows to absorb extra free space in the flex container.
- Shrinking: Shrinks to its minimum size to fit in the flex container.
- Sizing: The item is sized according to its
width
andheight
properties. - Equivalent to
flex: 1 1 auto
none (flex 0 0 auto)
- Growth: Doesn’t grow to absorb extra free space in the flex container.
- Shrinking: Doesn’t shrink to its minimum size to fit in the flex container.
- Sizing: The item is sized according to its
width
andheight
properties. - Equivalent to
flex: 0 0 auto
Sources
Tagged:
CSS
Thanks for your comment 🙏. Once it's approved, it will appear here.
Leave a comment