Флексбокс, часть 2 / «Гибкое» меню с переполнением, часть 2 [22/28]
×

«Гибкое» меню с переполнением, часть 2 [22/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"> <header> <div class="logo"> <img src="img/keksby.svg" alt=""> </div> <div class="menu"> <div> <a href="#">Норвежский лосось</a> </div> <div> <a href="#">Зубатка</a> </div> <div> <a href="#">Карась</a> </div> <div> <a href="#">Окунь</a> </div> <div> <a href="#">Зеркальный карп</a> </div> <div> <a href="#">Акула</a> </div> </div> </header> </body> </html>
.menu { display: flex; flex-wrap: wrap; }
HTML Academy
  1. Для всех дочерних дивов в .menu задайте коэффициент растягивания 1,
  2. а затем добавьте в меню последним ещё один див со ссылкой с текстом Сом.
  3. После этого задайте блоку .menu ширину 300px,
  4. а затем 200px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #18, который стартует 7 августа.

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

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

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

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