Growing Items

The cards wrap nicely now, but each line ends with some free space on the right. It would look better if the cards filled the whole line.

How much of the free space an item gets is set by the flex-grow property. This time, it's a property of the flex item, not of the container. Its value is a number:

• 0: the item doesn't grow. This is the default.
• 1: the item grows and gets a share of the free space. When several items in a line have flex-grow: 1, they share the free space equally.
• A bigger number means a bigger share: an item with flex-grow: 2 gets twice as much of the free space as an item with flex-grow: 1.

All our cards start at 12rem, so when every card in a line gets the same share of the free space, they end up equally wide and fill the whole line.

You'll often see the shorthand flex: 1. It sets flex-grow: 1 too, but it also gives the item a starting size of zero instead of its width. The width is then ignored, and all the items with flex: 1 share the whole line equally. That's handy, for example, for a main column that should fill the space next to a sidebar with a fixed width:

.sidebar {
	width: 15rem;
}

.main-column {
	flex: 1;
}

Our cards, however, need their width: it tells the browser when a card no longer fits on the line and has to wrap. That's why we use flex-grow: 1 for them.