flex-grow, flex-shrink and flex-basis
The flex shorthand combines flex-grow, flex-shrink, and flex-basis.
flex-grow determines how an item can receive positive free space. flex-shrink determines how it can shrink when insufficient space exists. flex-basis establishes the initial main-size contribution before free-space distribution.
Understanding these three values is critical for avoiding mysterious width behavior.
Flex Sizing
Flexible Columns
.sidebar {
flex: 0 0 240px;
}
.content {
flex: 1 1 auto;
min-width: 0;
}💡 The sidebar remains approximately 240px while the content absorbs available space.
min-width: 0 allows long content to shrink instead of forcing overflow.Key Takeaways
flex-basiscontrols the initial main-size contribution.flex: 1is a common way to distribute available space.min-width: 0is frequently important inside flex layouts.
Knowledge Check
Which flex property controls an item's initial main-size contribution?