flex-grow tells a flex item what share of a flex container’s leftover space it may take. Think of the empty space as a snack: items with positive grow values get slices, while the default value, 0, means “no thanks.” It matters only when the container has room left after its items have been sized. section 12.4
item {
flex-grow: value;
}
Apply flex-grow to the flex item you want to expand. Replace value with 0 or a positive number. section 12.4
A single item with any positive value receives all available empty space. When several items can grow, equal values split it evenly. Different values split the space in proportion to their values—not necessarily the items’ final total sizes. For values 1, 2, and 1, the available space is divided 25%, 50%, and 25%. Add the grow values, then divide each item’s value by that total. section 12.4
PLAY: Use flex-grow when a layout needs an item to occupy leftover room.
- Let a description area expand beside a thumbnail by setting its flex-grow to 1; keep the image from shrinking with flex-shrink: 0. section 12.5
- Make a main area fill unused vertical space so a footer stays at the bottom of a window. section 12.6
- Divide a two-column main area unevenly: flex-grow: 3 on article and flex-grow: 1 on aside assign 75% and 25% of available horizontal space. section 12.6
- Fill the space above a photo-gallery footer with main { flex-grow: 1; }, then use align-content: flex-start to avoid odd thumbnail spacing. section 15.7
A main area and sidebar
First make main a flex container. Then give article three shares of leftover width and aside one share. If the container has extra horizontal space, article gets three quarters and aside gets one quarter. main { display: flex; flex-grow: 1; } article { flex-grow: 3; } aside { flex-grow: 1; } section 12.6
REMEMBER: flex-grow answers one question: should this item grow when extra room exists? Nearby flex properties solve different problems: flex-shrink handles too little room, flex-basis suggests an initial size, and flex combines grow, shrink, and basis in one declaration. section 12.4 section 12.7
