Флексбокс, часть 2 / Заголовок с описанием, часть 2 [20/28]
×

Заголовок с описанием, часть 2 [20/28]

А теперь давайте проверим, как сработает наша раскладка, если текста станет немного больше.

На случай «переполнения» зададим контейнеру перенос флекс-элементов на новую строку.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Заголовок с описанием, часть 2</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="subtle"> <section class="card"> <h1 class="card-title"> <span class="card-title-main">Кекс против флекса</span> <span class="card-title-note">история взросления</span> </h1> <p>За свою долгую карьеру фронтенд-разработчика Кекс видал много непонятных решений...</p> </section> <section class="card"> <h1 class="card-title"> <span class="card-title-main">Кекс любит флекс</span> <span class="card-title-note">история успеха</span> </h1> <p>Изучение флексбокса далось с трудом, но те возможности, которые появились у Кекса с этой «гибкой» раскладкой...</p> </section> </body> </html>
.card { margin-bottom: 20px; line-height: 1.3; } .card-title { display: flex; margin-top: 0; align-items: flex-end; } .card-title span { background-color: #c8dcff; border: 1px solid #999999; } .card-title-main { flex-grow: 1; }
HTML Academy
  1. Замените текст Кекс любит флекс на Инструктор Кекс и удивительный флекс,
  2. а затем блоку .card-title задайте перенос флекс-элементов на новую строку.
  3. Уберите у дочерних спанов .card-title рамку и фоновый цвет.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый JavaScript #3, который стартует 26 сентября.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.