2 способа создать макет Святого Грааля с Flexbox

2 способа создать макет Святого Грааля с Flexbox

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

Итак, в этом руководстве мы рассмотрим, как создать макет Святого Грааля с помощью flexbox — двумя различными способами. Во-первых, мы будем использовать один огромный flex-контейнер для всех элементов. Во-вторых, мы используем два меньших контейнера, которые будут разделять в коде горизонтальные и вертикальные элементы.

Мы также будем использовать подход «mobile-first», что означает, что макетом по умолчанию будет ориентирован на мобильные устройства, а макет для настольных устройств будет задаваться с помощью медиа-запроса min-width. Наш макет Святого Грааля в полном размере будет выглядеть следующим образом:

2 способа создать макет Святого Грааля с Flexbox

И вот как это будет выглядеть на мобильных устройствах (помните, что это макет по умолчанию, который мы создадим первым):

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

2 способа создать макет Святого Грааля с Flexbox

Зачем создавать макет Святого Грааля с помощью flexbox?

Хотя макет Святого Грааля также возможно создать с помощью CSS Grid, у flexbox есть некоторые преимущества. Самое главное — он позволяет нам создавать контент-ориентированные боковые панели. Это связано с тем, что когда flexbox выделяет пространство для flex-элементов, он учитывает ширину их содержимого. В результате мы можем пропорционально распределить доступное пространство между основной областью и боковой панелью с помощью свойства flex.

Мы также будем использовать свойство order, чтобы изменить порядок элементов в зависимости от размера области просмотра. Таким образом, на мобильных устройствах основная область будет находиться в верхней части экрана прямо под заголовком, а на больших экранах левая боковая панель будет находиться перед основной областью.

1. Макет Святого Грааля с использованием одного уровня flex-элементов

Создайте для демонстрации два пустых текстовых файла: один для HTML (например, index.html) и один для CSS (например, style.css).

1.1 Настройте HTML

Первый метод предполагает плоскую структуру HTML. Элемент .container будет flex-контейнером, содержащим 5 flex-элементов: header, .main, .left-sidebar, .right-sidebar, footer.

В файле HTML разместите область основного контента перед двумя боковыми панелями. Это связано прежде всего с тем, что мы следуем принципу «mobile-first» и хотим сначала вывести основной контент для пользователей мобильных устройств. Однако этот порядок источников также улучшает доступность, так как программы чтения с экрана также будут читать основной контент перед боковыми панелями.

1.2 Основные стили

Откройте CSS-файл в редакторе кода и добавьте некоторые правила сброса и основные стили. Те, что приведены ниже – это самые простые. Они удаляют некоторые из стилей браузера по умолчанию и добавляют цвет и выравнивание к flex-элементам.

1.3 Добавьте правила FLEXBOX для мобильного представления

Для мобильных устройств макет Святого Грааля очень прост — для этого нужны два правила CSS. Сначала мы устанавливаем для свойства display — flex. Во-вторых, мы размещаем flex-элементы вертикально друг над другом, используя flex-direction: column;.

1.4 Добавьте правила FLEXBOX для настольного представления

Для настольного представления мы используем медиа-запрос min-width. Прежде всего, мы меняем значение lex-direction на row, так как теперь основная область и две боковые панели будут отображаться рядом друг с другом. Мы также устанавливаем для flex-wrap значение wrap так, чтобы flex-элементы могли красиво переноситься вдоль главной оси flex-контейнера.

Мы также установили для width элементов header и footer 100%, так как они должны растягиваться на весь экран. Кроме того, мы используем правило min-height: 80vh; для раздела main, так что демо будет иметь высоту по умолчанию даже без содержимого.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы также переупорядочиваем элементы, используя свойство order. Таким образом, левая боковая панель для пользователей настольных компьютеров будет отображаться перед основной областью. Значение по умолчанию для order равно 0 для каждого элемента. Таким образом, нам не нужно менять его для первого элемента (header), так как оно должно быть равным 0. Тем не менее, мы присваиваем индивидуальное значение order всем остальным элементам, от 1 до 4.

Свойство flex определяет, как доступное пространство распределяется между flex-элементами. Поскольку элементы header и footer имеют фиксированную ширину (100% экрана), оставшееся пространство распределяется только между основной областью и двумя боковыми панелями в пропорции 2: 1: 1.

2. Макет Святого Грааля с использованием двух уровней

2.1 Настойка HTML

Во втором методе мы помещаем основную область и две боковые панели в элемент .content, чтобы иметь возможность обрабатывать их отдельно. В результате у нас будет два flex-контейнера. Внешний контейнер flex-контейнер будет элементом .container, который будет содержать 3 flex-элемента: header, .content, footer.

Элемент .content будет внутренним flex-контейнером. В него также войдут 3 flex-элемента: main, .left-sidebar, .right-sidebar.

2.2 Начинаем с основных стилей

Основные стили CSS такие же, как в предыдущем примере:

2.3 Добавьте правила FLEXBOX для мобильного представления

Правила flexbox для маленьких экранов такие же, как и раньше, однако теперь мы добавим их для двух flex-контейнеров. В результате все элементы контента на мобильных устройствах будут красиво отображаться друг над другом.

2.4 Добавьте правила FLEXBOX для настольного представления

Мы используем ту же логику и для настольного представления. Однако теперь мы меняем только направление внутреннего контейнера (.content ). Таким образом, элементы header, .content и footer будут отображаться в виде столбца, а элементы main, .left- sidebar и .right-sidebar — в виде ряда в среднем столбце (.content).

Эти правила задают то же соотношение, что и в предыдущем методе — 2: 1: 1. Мы также определяем порядок внутренних flex-элементов, устанавливая для свойства order левой боковой панели значение 1, для основного содержимого — 2, а для правой боковой панели — 3.

Заключение

В этой статье мы рассмотрели два метода создания макета Святого Грааля с помощью flexbox — оба дают один и тот же результат. Поскольку ни один из них не превосходит другой, вы можете использовать тот, который вам больше нравится, или лучше соответствует остальной части вашего кода. Если вы хотите увидеть, как макет святого Грааля выглядит в реальной жизни, вы также можете посмотреть онлайн-демонстрации одноуровневых и двухуровневых методов.

Автор: DeveloperDrive Staff

Источник: //www.developerdrive.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Flexbox

Изучите работу с Flexbox

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: