• Теория
  • Теория

Используем flex

Сверстаем ещё одну страницу. Вот её макет:

Макет страницы

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

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

Макет основного содержимого

Мы уже знаем, как сделать колонки с помощью гридов. Но есть и другой способ — флексбоксы (от английского flexible — «гибкий»). Это ещё одна очень популярная технология. Она появилась раньше гридов и поэтому чуть лучше поддерживается браузерами.

Чтобы использовать особые свойства флексбоксов, нужно с помощью display изменить тип элемента:

display: flex;

Бокс с типом flex называют флекс-контейнером, а его дочерние боксы — флекс-элементами.

Флекс-элементы автоматически выстраиваются вдоль главной оси. По умолчанию она направлена слева направо. Подробнее об осях рассказывается в части «Флексбокс. Знакомство».

Схема главной оси флекс-контейнера

Если мы сделаем <main> флекс-контейнером, его дочерние элементы выстроятся в ряд. Так как в основном содержимом два раздела, то мы получим две колонки. Если бы флекс-элементов было три, то и колонок вышло бы три и так далее.

Начнём верстать страницу. Сначала подключим стилевые файлы, а после превратим <main> из блочного бокса во флекс-контейнер и посмотрим, что из этого выйдет. Для стилизации основного содержимого используем класс page-main.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Сетки» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.