Open r9young opened 4 months ago
When using the flex shorthand, the interpretation of the values depends on how many are provided:
flex
Two Values:
flex-grow
flex-basis
flex-shrink
1
Example: flex: 1 100%
flex: 1 100%
100%
Three Values:
Example: flex: 1 2 100px
flex: 1 2 100px
2
100px
This shorthand approach helps to simplify the configuration of flex items in one concise declaration.
When using the
flex
shorthand, the interpretation of the values depends on how many are provided:Two Values:
flex
shorthand will treat them as:flex-grow
(first value): Specifies how much the item will grow relative to others.flex-basis
(second value): Sets the initial size of the item.flex-shrink
value defaults to1
in this case.Example:
flex: 1 100%
1
isflex-grow
.100%
isflex-basis
.flex-shrink
defaults to1
.Three Values:
flex-grow
(first value): Specifies how much the item will grow.flex-shrink
(second value): Specifies how much the item will shrink.flex-basis
(third value): Sets the initial size of the item.Example:
flex: 1 2 100px
1
isflex-grow
.2
isflex-shrink
.100px
isflex-basis
.This shorthand approach helps to simplify the configuration of flex items in one concise declaration.