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

«Гибкое» меню [23/31]

Флексбокс полезен при создании блоков с дочерними элементами динамической длины. Хороший пример — меню.

Часто встречаются дизайны, в которых пункты равномерно распределены по блоку меню. Первый пункт примыкает к левой части блока меню, а последний — к правой, причём с небольшими внутренними отступами.

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

И тут на помощь приходит флексбокс. Зададим меню раскладку флексбокса, пункты станут флекс-элементами. С помощью свойства распределения элементов justify-content добьёмся нужного результата.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>«Гибкое» меню</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> </header> </body> </html>
.menu { }
HTML Academy
  1. Блоку .menu задайте раскладку флексбокса,
  2. а затем равномерное распределение элементов по главной оси с половинными отступами по краям.
Теория Проверить Следующее задание

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

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

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

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