• Теория
  • Теория

Заголовок с описанием на флексбоксах

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

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

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

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

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

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

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Флексбокс. Погружение» тренажёра «Погружение в техники раскладок» можно после регистрации и оформления подписки.