CSS Flex Grow, Shrink & Basis

CSS Flex Grow, Shrink & Basis

The CSS flex-grow, flex-shrink, and flex-basis properties work together to control how flex items are sized along the main axis of a flex container.

The flex-basis property establishes an item's initial main size, flex-grow controls how positive free space can be distributed, and flex-shrink controls how items can shrink when there is not enough space.

How Flex Sizing Works

Flexbox starts with the flex items' base sizes and then determines whether the container has positive or negative free space along the main axis.

If there is positive free space, flex-grow determines how flex items can share it. If the items require more space than is available, flex-shrink participates in determining how they become smaller.

flex-grow

The flex-grow property accepts a non-negative number that represents a flex item's growth factor.

.item {
  flex-grow: 1;
}

The initial value is 0, which means an item does not grow simply because the flex container has unused main-axis space.

.item {
  flex-grow: 0;
}

Setting a positive growth factor allows the item to receive a share of positive free space.

Flex Grow Factors

When multiple flex items can grow, their flex-grow factors determine their relative shares of the positive free space.

.item-1 {
  flex-grow: 1;
}
.item-2 {
  flex-grow: 2;
}
.item-3 {
  flex-grow: 1;
}

The growth factors total 4. Item 1 and Item 3 each receive one share of the distributable positive free space, while Item 2 receives two shares.

This does not necessarily mean Item 2 will end up exactly twice as wide as the other items. The growth factors distribute free space in addition to the items' flex base sizes.

flex-shrink

The flex-shrink property accepts a non-negative number that controls how a flex item participates in shrinking when the items exceed the available main-axis space.

.item {
  flex-shrink: 1;
}

The initial value is 1, so flex items are normally allowed to shrink.

.item {
  flex-shrink: 0;
}

A value of 0 prevents the item from participating in the normal flex shrinking process.

Flex Shrink Factors

When negative free space must be removed, flex-shrink contributes to how much each item shrinks.

.item-1 {
  flex-shrink: 1;
}
.item-2 {
  flex-shrink: 2;
}
.item-3 {
  flex-shrink: 1;
}

Shrinking is not based on the shrink factor alone. Flexbox also takes the item's flex base size into account when calculating how negative free space is distributed.

As a result, flex-shrink: 2 should not be interpreted as meaning that the final item will always be half the size of an item using flex-shrink: 1.

flex-basis

The flex-basis property specifies the initial main size of a flex item before the browser distributes positive or negative free space.

.item {
  flex-basis: 200px;
}

In a row-oriented flex container, this commonly establishes an initial width. In a column-oriented flex container, it commonly establishes an initial height.

The property can use many of the same types of values used for sizing, including lengths and percentages.

.item {
  flex-basis: 30%;
}

flex-basis: auto

The initial value of flex-basis is auto.

.item {
  flex-basis: auto;
}

With auto, the item's main-size property is used when it provides a definite size. Otherwise, the item's content participates in determining its flex base size.

.item {
  width: 200px;
  flex-basis: auto;
}

In a row-oriented flex container, the declared width can therefore provide the item's initial main size when flex-basis is auto.

flex-basis: 0

A zero flex basis removes the item's content-based or main-size starting point from the basic distribution of positive free space.

.item {
  flex-grow: 1;
  flex-basis: 0;
}

When several items use the same growth factor and a zero basis, Flexbox can distribute the available main-axis space more evenly among them, subject to minimum-size and content constraints.

.item {
  flex: 1 1 0;
}

This pattern is commonly used when flex items should share the available space equally rather than grow from different content-based starting sizes.

The flex Shorthand

The flex shorthand provides a convenient way to specify the grow, shrink, and basis components together.

.item {
  flex: 1 1 200px;
}

Using the shorthand is often preferable when setting flexible sizing because all three components are defined together.

Common flex Values

The flex shorthand supports several useful patterns.

.item {
  flex: 1;
}

When several sibling items use flex: 1, they commonly share the available main-axis space evenly, subject to their minimum-size constraints.

Flex Direction and Sizing

Flex sizing always operates along the main axis, so the physical dimension affected by flex-basis depends on flex-direction.

.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-direction: column;
}

With row, the main axis follows the inline axis, which is commonly horizontal. With column, the main axis follows the block axis, which is commonly vertical.

This is why flex-basis is described as an initial main size rather than simply an initial width.

Minimum Size of Flex Items

Flex items have automatic minimum-size behavior that can sometimes prevent them from becoming as small as expected.

.item {
  min-width: 0;
}

In a row-oriented flex container, long unbreakable content can cause an item to resist shrinking. Setting min-width: 0 can allow the item to shrink below its content-based automatic minimum when that is appropriate for the layout.

.item {
  min-width: 0;
  overflow-wrap: break-word;
}

This is especially useful when flexible items contain long text, URLs, or other content that might otherwise force the layout wider than intended.

CSS Flex Sizing Example

The following example compares flex-grow, flex-shrink, and flex-basis. Open the example in the editor and change the values to see how the items divide available space.

.item-1 {
  flex: 1 1 120px;
}
.item-2 {
  flex: 2 1 120px;
}
.item-3 {
  flex: 1 0 120px;
}