flex-grow: 3, the item will grow proportionally to three times the size of other flex items with a grow value of 1.
The .wrapper > * rule applies flex: 1 100% to all immediate children of the .wrapper class, meaning:
flex-grow:1
flex-shrink: Defaults to 1 (not explicitly specified)
flex-basis:100%
This results in each child normally occupying 100% of the parent container's width, so they stack vertically.
However, the .main class is explicitly set to flex: 3 0px; within a media query:
flex-grow:3
This value ensures that .main will grow proportionally to three times the space of the other items that have a flex-grow of 1.
flex-shrink:0
The .main item will not shrink if there isn't enough room.
flex-basis:0px
The .main item starts with no inherent width and relies entirely on flex-grow to expand.
Final Outcome
The .main item will take up significantly more space than the other flex items (specifically, three times more space) due to its higher flex-grow value. This makes .main the dominant element when there's room for expansion.
flex-grow: 3, the item will grow proportionally to three times the size of other flex items with a grow value of 1.
The
.wrapper > *
rule appliesflex: 1 100%
to all immediate children of the.wrapper
class, meaning:flex-grow
:1
flex-shrink
: Defaults to1
(not explicitly specified)flex-basis
:100%
This results in each child normally occupying 100% of the parent container's width, so they stack vertically.
However, the
.main
class is explicitly set toflex: 3 0px;
within a media query:flex-grow
:3
.main
will grow proportionally to three times the space of the other items that have aflex-grow
of1
.flex-shrink
:0
.main
item will not shrink if there isn't enough room.flex-basis
:0px
.main
item starts with no inherent width and relies entirely onflex-grow
to expand.Final Outcome
The
.main
item will take up significantly more space than the other flex items (specifically, three times more space) due to its higherflex-grow
value. This makes.main
the dominant element when there's room for expansion.