In a Flexbox layout, flex-grow, flex-shrink, and flex-basis are the three core attributes that control the behavior of child elements. 1. flex-grow determines how much the element can expand when there is extra space, and the larger the value, the larger the proportion; 2. flex-shrink determines the proportion of element shrinkage when there is insufficient space, and the larger the value, the more shrinkage; 3. flex-basis is the initial size of an element before it is stretched and can be set to a fixed value or percentage. They are usually set together by flex abbreviation properties. For example, flex: 1 1 200px means that equal proportion expansion and shrinkage are allowed, and adjusted from 200px as the starting point, thereby achieving a flexible and controllable layout effect.

When you use Flexbox for layout, flex-grow , flex-shrink , and flex-basis are the three main properties that control how flex items behave inside a flex container. They work together as part of the shorthand flex property, but each has its own specific role.

Here's what they do in simple terms:

flex-grow: How much an item can grow

This tells the browser how much space an item should take up relative to other items when there's extra space in the container.

• A value of 0 means it won't grow at all.
• A value of 1 means it will grow equally with others that also have 1 .
• If one item is 2 and others are 1 , it'll take up twice as much space as the others (as long as there's room).

For example:

 .item {
  flex-grow: 1;
}

This is commonly used to make all items the same width, filling the container evenly.

flex-shrink: How much an item can shrink

When there's not enough space, this determines how much an item will shrink compared to others.

• A value of 1 (default) means it can shrink normally.
• A value of 0 means it won't shrink at all — useful if you have content that shouldn't be compressed.
• Higher values ??mean the item will shrink more than others.

So if you have one item that must stay wide even when space is tight, you might set:

 .item {
  flex-shrink: 0;
}

flex-basis: The starting size before growing/shrinking

This is basically the “starting point” for how big the item is before any growing or shrinking happens.

• You can set it to a fixed size like 200px , or a percentage like 50% .
• It can also be set to auto , which means the size is based on the content or any explicit width/height.

Some common setups:

• flex-basis: auto → uses the element's width or height
• flex-basis: 0 → lets flex-grow take full control of distribution
• flex-basis: 30% → give a starting size, then adjusts based on grow/shrink

Tip: When using flex-grow with multiple items, setting flex-basis to 0 often give more predictable results because it makes space distribution purely based on the growth factor.

Putting it all together

You'll usually see these three used in the shorthand flex property like this:

 .item {
  flex: 1 1 200px;
}

That translates to:

• flex-grow: 1;
• flex-shrink: 1;
• flex-basis: 200px;

If you want equal-width columns that don't shrink too much, maybe go with:

 flex: 1 0 25%;

Or if you just want something to fill space and ignore its original size:

 flex: 1 1 0;

Basically that's it. These three properties may seem confusing at first, but once you understand their individual roles — grow for extra space, shrink for tight spots, and basis as the starting size — it gets a lot easier to control your layouts.

The above is the detailed content of What do the flex-grow, flex-shrink, and flex-basis properties do?. For more information, please follow other related articles on the PHP Chinese website!