Флексбокс, часть 1 / «Гибкое» меню, часть 3 [25/31]
×

«Гибкое» меню, часть 3 [25/31]

С помощью раскладки флексбокса можно также легко управлять порядком следования элементов, не изменяя при этом HTML-код.

Давайте заменим один из пунктов меню блоком с логотипом, а затем легко попереставляем его на разные места с помощью свойства order.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>«Гибкое» меню, часть 3</title> <base href="/assets/course96/"> <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> </header> </body> </html>
.menu { display: flex; justify-content: space-around; } .logo { }
HTML Academy
  1. Вырежьте блок .logo и вставьте его внутрь меню вместо div с текстом Сметана.
  2. Затем для .menu задайте центральное выравнивание элементов по поперечной оси.
  3. Блоку .logo задайте порядковый номер флекс-элемента -1,
  4. а потом 1.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #18, который стартует 7 августа.

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

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

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

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