The flex property is a shorthand that sets three separate flex properties:
flex-grow: Controls how much an item will grow relative to the other flex items.
flex-shrink: Determines how much an item will shrink relative to others when space is constrained.
flex-basis: Defines the initial main size of a flex item before any growth or shrinkage occurs.
In flex: 1 100%;, these individual properties are set as follows:
flex-grow is set to 1: This means the item will grow to take up any remaining space in the flex container proportionally to other items.
flex-shrink is not explicitly specified and will default to 1, meaning the item will shrink proportionally to other items if space is limited.
flex-basis is set to 100%: This means the item initially occupies 100% of the container's main size, making it a full-width block before accounting for growing or shrinking.
So the shorthand flex: 1 100% sets flex-grow to 1, flex-shrink to its default value (1), and flex-basis to 100%.
The
flex
property is a shorthand that sets three separate flex properties:In
flex: 1 100%;
, these individual properties are set as follows:flex-grow is set to
1
: This means the item will grow to take up any remaining space in the flex container proportionally to other items.flex-shrink is not explicitly specified and will default to
1
, meaning the item will shrink proportionally to other items if space is limited.flex-basis is set to
100%
: This means the item initially occupies 100% of the container's main size, making it a full-width block before accounting for growing or shrinking.So the shorthand
flex: 1 100%
setsflex-grow
to1
,flex-shrink
to its default value (1
), andflex-basis
to100%
.