Растягивание элементов

Карточки теперь красиво переносятся, но в конце каждой линии справа остаётся свободное место. Было бы лучше, если бы карточки заполняли всю линию.

Какую часть свободного места получит элемент, задаёт свойство flex-grow. На этот раз это свойство flex-элемента, а не контейнера. Его значение — число:

• 0: элемент не растёт. Это значение по умолчанию.
• 1: элемент растёт и получает долю свободного места. Когда у нескольких элементов линии flex-grow: 1, они делят свободное место поровну.
• Большее число — большая доля: элемент с flex-grow: 2 получает вдвое больше свободного места, чем элемент с flex-grow: 1.

Все наши карточки начинают с 12rem, поэтому, когда каждая карточка в линии получает одинаковую долю свободного места, они становятся одной ширины и заполняют всю линию.

Вам часто будет встречаться сокращённая запись flex: 1. Она тоже задаёт flex-grow: 1, но ещё и делает начальным размером элемента ноль вместо его ширины. Ширина тогда игнорируется, и все элементы с flex: 1 делят всю линию поровну. Это удобно, например, для основной колонки, которая должна занять всё место рядом с боковой панелью фиксированной ширины:

.sidebar {
	width: 15rem;
}

.main-column {
	flex: 1;
}

Нашим карточкам, однако, ширина нужна: по ней браузер понимает, когда карточка уже не помещается в линию и должна перенестись. Поэтому для них мы используем flex-grow: 1.