До сих пор размещали элементы друг за другом сверху вниз. Заголовок, потом картинка, потом текст, потом кнопка. Как столбик кирпичей. Но посмотрите на сайт ADC. В секции «Контакты» видите информацию в два столбца? Слева «По вопросам поступления» с телефоном и почтой, справа «По общим вопросам» с другим телефоном. Элементы расположены горизонтально, рядом друг с другом.
Без специальных инструментов — это сложно. Раньше использовали таблицы или float. Получалось громоздко и хрупко. Теперь есть Flexbox. Flexible Box Layout, гибкая блочная раскладка. Современный способ размещать элементы в ряд или столбец, выравнивать их, распределять пространство.
Flexbox — это как коробка с отделениями. Коробка — это контейнер. Отделения — это элементы внутри. Говорите коробке: расположи отделения в ряд или в столбец, прижми их к краю или по центру, растяни на всю ширину или оставь как есть. Коробка выполняет команды.
Посмотрите на секцию «Контакты» ADC. Две колонки с информацией расположены горизонтально. Создайте HTML структуру:
Без стилей колонки расположатся друг под другом. Каждый <div> блочный элемент, занимает всю ширину. Чтобы расположить их рядом, примените Flexbox к контейнеру:
Сохраните. Обновите страницу. Видите? Колонки встали в ряд. Одно свойство display: flex превратило контейнер в flex-контейнер. gap обозначает отступы между элементами. Первое значение по горизонтали, второе — по вертикали. Вертикальный отступ работает здесь благодаря flex-wrap: wrap. Это свойство позволяет элементам переноситься. Если ширины не хватает, элемент перейдёт на следующую строку. nowrap запрещает перенос (по умолчанию).
В хедере чуть другая ситуация, там элементы распологаются на одинаковом расстоянии друг от друга. Это нам помогает сделать также flex.
Добавим хедеру стили:
justify-content: space-between позволяет нам как раз сделать равное расстояние между элементами, он отвечает за горизонтальное расположение. align-items — за вертикальное. Значение center говрит браузеру, что все элементы находятся по центру относительно горизонтальной оси.
Далее давайте обернём весь наш контентный блок после большой картинки в div, ведь между блоками основными у нас одинаковое расстояние
Для тега main добавим стили
flex-direction даёт браузеру понять как мы хотим расположить элементы: вертикально или горизонтально. column означает вертикальное расположение.
У нас есть блок «Наш ADC» с картинкой, тут есть и вертикальное расположение блоков и горизонтальное. Давайте добавим.
Добавим стили:
Посмотрим на секцию «Что изучают студенты ADC». Здесь есть тоже схожие расстояния между элементами.
Добавим и сюда flex:
И последний блок, который нам осталось стилизовать при помощи flex — это форма
Добавим flex:
Запомните главное. display: flex делает элемент flex-контейнером. justify-content выравнивает элементы по горизонтали. align-items выравнивает по вертикали. gap добавляет отступы между элементами. flex-direction меняет направление раскладки. flex-wrap разрешает перенос элементов.
В качестве домашнего задания пропишите flex для всех блоков на странице статьи.
В прошлом уроке использовали Flexbox для раскладки элементов в ряд или столбец. Flexbox отлично работает для одномерных раскладок: навигация, футер, карточки в ряд. Но есть задачи посложнее. Посмотрите на секцию «Контакты» ADC. Видите сетку из четырёх блоков? Верхний ряд: «По вопросам поступления» слева, «По общим вопросам» справа. Нижний ряд: «Дополнительное образование» слева, «Адрес» справа. Чёткая сетка два столбца, два ряда.
Flexbox может это сделать, но сложно. Нужно создавать вложенные контейнеры, считать ширины, настраивать переносы. Для таких двумерных раскладок существует Grid Layout. CSS Grid, сеточная раскладка. Вы рисуете сетку из строк и столбцов, размещаете элементы в ячейки. Как таблица, но намного мощнее и гибче.
Grid — это как шахматная доска. Доска разделена на клетки. Размещаете фигуры на нужные клетки. Одна фигура может занять одну клетку, другая несколько. Grid позволяет делать то же самое с элементами страницы.
У нас уже есть разметка для секции контактов:
Четыре блока с контактной информацией. Без стилей они встанут друг под другом. Примените Grid:
