Flex-grow

Learn item growth with flex-grow.

What is flex-grow?

flex-grow decides how much a flex item grows to fill free space. The default value is 0, meaning the item will not grow beyond its size. Setting flex-grow: 1 makes the item take all the remaining space.

Give two items flex-grow: 1 and they share the space evenly. Give one 2 and the other 1, and the first grows twice as much. These values are ratios, not fixed sizes.

flex-shrink

flex-shrink decides how much an item shrinks when there is not enough room. The default value is 1, so items shrink evenly when needed. Setting flex-shrink: 0 keeps the item from shrinking, which may cause overflow.

Give one item 3 and another 1, and the first shrinks three times as fast. Like flex-grow, this is a ratio; the actual shrink amount depends on the starting size.

flex-basis

flex-basis sets the starting size of an item before growth and shrink. The default is auto, which uses the content size or the width property. Setting flex-basis: 200px makes the item start at 200 pixels.

This value is the base for growth and shrink calculations. With flex-basis: 0, all items start at zero and only the flex-grow ratios set the size.

Exercise Grow two items in proportion

Add a .row flex container with display: flex. Give the :first-child item flex-grow: 2 and the :last-child item flex-grow: 1.

Show example solution

/* grow two items in proportion */
.row {
  display: flex;
}
.row > :first-child {
  flex-grow: 2;
}
.row > :last-child {
  flex-grow: 1;
}

Test yourself

In a two-item flex row, one item gets flex-grow: 2 and the other flex-grow: 1. What happens?
```
.row {
  display: flex;
}
.row > :first-child {
  flex-grow: 2;
}
.row > :last-child {
  flex-grow: 1;
}
```
- The second item grows twice as much
- The first item grows twice as much as the second
- Both items grow equally
- Neither item grows
Show answer

The first item grows twice as much as the second — Correct. flex-grow: 2 takes twice the ratio of flex-grow: 1, so the first item grows twice as much.

Write the flex-shrink: 0 declaration

.item {
  flex-grow: 0;
  ____: 0;
}

Show answer

.item {
  flex-grow: 0;
  flex-shrink: 0;
}

Match each property to its role

flex-grow

Growth ratio
flex-shrink

Shrink ratio
flex-basis

Starting size
0

flex-grow default

Next lesson: Flex shorthand

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies