Мы рассмотрели теоретическую часть и приступаем к практике в этой части. Давайте разберём на реальных элементах интерфейсов, в каких случаях бывает уместно использовать флексбокс.

Довольно распространённый ход в интерфейсе — блок с заголовком и небольшим уточняющим подзаголовком на одной строке. Заголовок находится в начале строки, а подзаголовок прижат к правому краю.

Если текст заголовка или подзаголовка сильно увеличится, то вёрстка не должна ломаться — тексты просто должны расположиться друг под другом.

Сверстать элемент с таким гибким поведением с помощью float или display: table не получится. Ведь нужно, чтоб блоки подписей одновременно и занимали свободное пространство, и чтобы их размеры зависели от текстового содержания, и чтобы в случае переполнения сетка перестраивалась.

Здесь нам поможет только флексбокс с flex-grow.

Для наглядности зададим текстовым блокам фоновый цвет и рамку, а в следующем задании уберём их.