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