How Do Flex-Grow, Flex-Shrink, and Flex-Basis Work in CSS?
Understanding the CSS Flexbox properties flex-grow,
flex-shrink, and flex-basis is essential for
creating fluid, responsive layouts without relying on rigid pixel
calculations. This article explains the exact role of each property, how
they interact to distribute available space inside a flex container, and
how to use the standard flex shorthand effectively.
The Foundation: Understanding Available Space
Before diving into the individual properties, it helps to understand
the concept of flex space distribution. A flex container arranges its
child items along a main axis (horizontal by default with
flex-direction: row).
When the total size of all flex items is smaller than the container, there is positive free space left over. When the total size exceeds the container width, there is negative free space (an overflow). The trio of sizing properties dictates how browser engines allocate positive space or shave off negative space among items.
flex-basis:
Setting the Starting Size
The flex-basis property defines the default, initial
size of an element before any remaining space is distributed or
removed.
- Default value:
auto - Common values: Length units (
px,em,rem,%,content,0)
When set to auto, the browser looks at the element's
explicit width (or height in a column layout).
If no explicit width is set, it falls back to the item's intrinsic
content size.
Setting flex-basis: 0 ignores the item's initial size
entirely, forcing the container to distribute the entire container width
strictly according to the growth ratios.
flex-grow:
Expanding into Free Space
The flex-grow property dictates how much a flex item
should expand relative to other items when positive free space is
available inside the container.
- Default value:
0(items do not grow beyond theirflex-basis) - Values: Unitless non-negative numbers (e.g.,
1,2,0.5)
If all sibling items have flex-grow: 1, the extra space
is divided equally among them. If one item has flex-grow: 2
while two others have flex-grow: 1, the remaining positive
space is split into 4 equal shares (2 + 1 + 1), with the first item
receiving 2 shares (50% of the extra space) and the others receiving 1
share each (25% each).
flex-shrink:
Compressing to Prevent Overflow
The flex-shrink property determines how a flex item
contracts relative to its siblings when the container is too small to
fit their combined initial sizes.
- Default value:
1(items shrink automatically to prevent overflow) - Values: Unitless non-negative numbers (e.g.,
0,1,3)
A value of flex-shrink: 0 prevents an element from
shrinking below its flex-basis or content size, which can
cause the item to overflow the container if space runs out. When
multiple items shrink, the calculation factors in both their
flex-shrink value and their initial
flex-basis, ensuring larger items absorb a proportionally
fair share of the reduction.
The flex Shorthand
CSS best practices recommend combining these three values into the
single flex shorthand:
.item {
flex: 1 1 200px; /* flex-grow | flex-shrink | flex-basis */
}Common shorthand presets include:
flex: initial(0 1 auto): Does not grow, shrinks if needed, respects natural content size.flex: auto(1 1 auto): Fully flexible, grows and shrinks based on initial content size.flex: none(0 0 auto): Fully inflexible, never grows or shrinks.flex: 1(1 1 0): Equal-width columns where all items grow and shrink proportionally regardless of content size.