- Теория
- Теория
Используем flex
Сверстаем ещё одну страницу. Вот её макет:
Условия те же: разметка и декоративное оформление полностью готовы, от нас требуется только сверстать сетку. Для наглядности снова используем подсветку сеточных элементов.
Идти по макету опять будем сверху вниз. Внешние отступы у <body> уже убраны, а в шапке боксы располагаются один под другим — там поток изменять не надо. Поэтому переходим сразу к основному содержимому. Согласно макету, оно должно располагаться в две колонки:
Мы уже знаем, как сделать колонки с помощью гридов. Но есть и другой способ — флексбоксы (от английского flexible — «гибкий»). Это ещё одна очень популярная технология. Она появилась раньше гридов и поэтому чуть лучше поддерживается браузерами.
Чтобы использовать особые свойства флексбоксов, нужно с помощью display изменить тип элемента:
display: flex;Бокс с типом flex называют флекс-контейнером, а его дочерние боксы — флекс-элементами.
Флекс-элементы автоматически выстраиваются вдоль главной оси. По умолчанию она направлена слева направо. Подробнее об осях рассказывается в части «Флексбокс. Знакомство».
Если мы сделаем <main> флекс-контейнером, его дочерние элементы выстроятся в ряд. Так как в основном содержимом два раздела, то мы получим две колонки. Если бы флекс-элементов было три, то и колонок вышло бы три и так далее.
Начнём верстать страницу. Сначала подключим стилевые файлы, а после превратим <main> из блочного бокса во флекс-контейнер и посмотрим, что из этого выйдет. Для стилизации основного содержимого используем класс page-main.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
