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.wrapperclass, meaning:flex-grow:1flex-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
.mainclass is explicitly set toflex: 3 0px;within a media query:flex-grow:3.mainwill grow proportionally to three times the space of the other items that have aflex-growof1.flex-shrink:0.mainitem will not shrink if there isn't enough room.flex-basis:0px.mainitem starts with no inherent width and relies entirely onflex-growto expand.Final Outcome
The
.mainitem will take up significantly more space than the other flex items (specifically, three times more space) due to its higherflex-growvalue. This makes.mainthe dominant element when there's room for expansion.