Добро пожаловать на второй курс! В первом курсе вы научились размечать страницы и оформлять их цветами, шрифтами и отступами. Теперь мы сделаем следующий большой шаг — научимся раскладывать элементы по странице так, как это делают в настоящих проектах. Вы освоите Flexbox для гибких макетов, научитесь писать чистую семантическую разметку, создавать формы и наводить порядок в CSS-коде.

Курс, как и прежде, построен вокруг сквозного проекта: мы возьмём страницу-лендинг и превратим её в аккуратный сайт компании с продуманной шапкой, секциями и рабочей формой обратной связи. Каждый урок добавляет к проекту новую возможность, и к концу у вас на руках будет цельная современная страница. Начнём с самого фундамента раскладки — Flexbox.

Зачем это нужно

До сих пор все блоки на нашей странице выстраивались строго друг под другом — так ведут себя блочные элементы по умолчанию. Но реальные сайты устроены иначе: логотип и меню стоят в ряд, карточки выстраиваются в колонки, кнопки располагаются бок о бок. Раньше такие раскладки делали громоздкими способами, а сегодня для этого есть Flexbox — простой и мощный инструмент для расположения элементов в ряд или в колонку.

После этого урока вы сможете превращать любой контейнер во «флекс» и управлять тем, как его дочерние элементы располагаются вдоль линии — и это откроет дорогу к настоящим макетам.

Что уже умеем / что добавим

Вы умеете создавать блоки div, давать им классы и оформлять отступами и фоном. Теперь научимся управлять их взаимным расположением. В сквозном проекте мы впервые поставим элементы в ряд — разместим ссылки будущего меню горизонтально.

Что вы узнаете в рамках статьи

• Что такое Flexbox и какую задачу он решает.
• Как включить флекс-раскладку свойством display: flex.
• Чем флекс-контейнер отличается от флекс-элементов.
• Что такое главная и поперечная оси.
• Как элементы ведут себя внутри флекс-контейнера по умолчанию.

Ключевые термины

• Flexbox — модуль CSS для гибкой раскладки элементов в ряд или колонку.
• Флекс-контейнер — элемент, которому задано display: flex.
• Флекс-элементы — прямые дочерние элементы контейнера.
• Главная ось — направление, вдоль которого выстраиваются элементы (по умолчанию горизонталь).
• Поперечная ось — ось, перпендикулярная главной.

Что такое Flexbox

Flexbox (от flexible box — «гибкий блок») — это способ расположения элементов, при котором контейнер сам распределяет своих детей вдоль выбранной линии. Вы объявляете блок флекс-контейнером, и он получает возможность выстраивать вложенные элементы в ряд или в колонку, управлять расстояниями между ними и их выравниванием.

Главное, что стоит понять сразу: Flexbox работает в связке «родитель — дети». Свойства раскладки вы задаёте контейнеру, а действуют они на его прямые дочерние элементы. Это разделение — ключ ко всему, что мы будем делать дальше.

Включаем флекс: display: flex

Чтобы включить Flexbox, контейнеру задают свойство display: flex. Возьмём блок с тремя ссылками:

<nav class="menu">
  <a href="#">Главная</a>
  <a href="#">Услуги</a>
  <a href="#">Контакты</a>
</nav>

.menu {
  display: flex;
}

До этого правила ссылки, будучи строчными, шли бы подряд в строке, а блоки встали бы друг под другом. После display: flex контейнер .menu становится флекс-контейнером, и три ссылки выстраиваются в аккуратный ряд слева направо. Обратите внимание: мы не трогали сами ссылки — достаточно было одного свойства на родителе.

Контейнер и его элементы

Как только вы написали display: flex, происходит разделение ролей. Сам блок .menu — это флекс-контейнер. Его прямые дети — три ссылки a — становятся флекс-элементами. Важно слово «прямые»: флекс-элементами становятся только непосредственные потомки, а не элементы, вложенные глубже.

<div class="row">
  <div class="box">Первый</div>
  <div class="box">Второй</div>
</div>

c

.row {
  display: flex;
}

Здесь .row — контейнер, а два .box — его флекс-элементы, и они встанут в ряд. Даже будучи блочными div, внутри флекс-контейнера они больше не растягиваются каждый на всю ширину, а занимают место по содержимому и выстраиваются вдоль линии. Это и есть магия Flexbox: поведение детей меняет родитель.

Главная и поперечная оси

У флекс-контейнера есть две оси. Главная ось — направление, вдоль которого выстраиваются элементы; по умолчанию она горизонтальная (слева направо). Поперечная ось ей перпендикулярна — по умолчанию вертикальная.

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

.menu {
  display: flex;
}

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

Применяем в проекте

Начнём собирать шапку сайта компании. Разместим ссылки навигации в горизонтальный ряд — это первый шаг к полноценному меню.

<nav class="nav">
  <a href="#">Главная</a>
  <a href="#">Услуги</a>
  <a href="#">О нас</a>
  <a href="#">Контакты</a>
</nav>

.nav {
  display: flex;
}

Обновите страницу: ссылки, которые раньше шли бы одна за другой как обычный текст, теперь образуют ровный горизонтальный ряд. Пока они прижаты друг к другу слева — на следующих уроках мы добавим между ними расстояние и распределим по ширине. Но каркас будущего меню уже стоит.

Частые ошибки

• display: flex не тому элементу.
  Свойство задают контейнеру-родителю, а не самим элементам, которые нужно выстроить.
• Ожидание влияния на глубоко вложенные элементы.
  Флекс действует только на прямых детей контейнера.
• Лишний контейнер.
  Чтобы выстроить элементы в ряд, они должны лежать в одном общем родителе; проверьте, что это так.
• Опечатка в значении.
  Пишется именно display: flex, а не display: flexbox.

Итоги

Поздравляем с началом второго курса и первым шагом в мир настоящих макетов! Вы узнали, что такое Flexbox, научились включать его одним свойством display: flex и разобрались в главном принципе — раскладкой управляет контейнер, а подчиняются ей его прямые дети. Вы даже поставили первые элементы будущего меню в ряд. Это фундамент, на котором держатся почти все современные интерфейсы.

Отличный старт — так держать! В следующем уроке мы научимся менять направление ряда и переносить элементы на новую строку с помощью flex-direction и flex-wrap.