От автора: до появления Модуля макетов flexbox было непросто создать макет Святого Грааля. Нам приходилось использовать всевозможные настройки, чтобы добиться такого вида макета, который понравился бы как маркетологам, так и владельцам веб-сайтов, чтобы он позволял использовать две боковые панели одновременно — одну слева и одну справа. Благодаря flexbox, теперь мы можем создать его всего с помощью нескольких строк кода.
Итак, в этом руководстве мы рассмотрим, как создать макет Святого Грааля с помощью flexbox — двумя различными способами. Во-первых, мы будем использовать один огромный flex-контейнер для всех элементов. Во-вторых, мы используем два меньших контейнера, которые будут разделять в коде горизонтальные и вертикальные элементы.
Мы также будем использовать подход «mobile-first», что означает, что макетом по умолчанию будет ориентирован на мобильные устройства, а макет для настольных устройств будет задаваться с помощью медиа-запроса min-width. Наш макет Святого Грааля в полном размере будет выглядеть следующим образом:
И вот как это будет выглядеть на мобильных устройствах (помните, что это макет по умолчанию, который мы создадим первым):
Зачем создавать макет Святого Грааля с помощью 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» и хотим сначала вывести основной контент для пользователей мобильных устройств. Однако этот порядок источников также улучшает доступность, так как программы чтения с экрана также будут читать основной контент перед боковыми панелями.
<div class="container"> <header>HEADER</header> <main>MAIN CONTENT</main> <aside class="left-sidebar">LEFT SIDEBAR</aside> <aside class="right-sidebar">RIGHT SIDEBAR</aside> <footer>FOOTER</footer> </div>
1.2 Основные стили
Откройте CSS-файл в редакторе кода и добавьте некоторые правила сброса и основные стили. Те, что приведены ниже – это самые простые. Они удаляют некоторые из стилей браузера по умолчанию и добавляют цвет и выравнивание к flex-элементам.
/* RESET */
* { box-sizing: border-box; padding: 0; margin: 0;
}
/* COLORS and FONTS */
body { color: white; text-align: center; font-size: 24px; line-height: 3;
}
header { background: orangered;
}
main { background: darkslateblue;
}
footer { background: deeppink;
}
.left-sidebar { background: dodgerblue;
}
.right-sidebar { background: forestgreen;
}1.3 Добавьте правила FLEXBOX для мобильного представления
Для мобильных устройств макет Святого Грааля очень прост — для этого нужны два правила CSS. Сначала мы устанавливаем для свойства display — flex. Во-вторых, мы размещаем flex-элементы вертикально друг над другом, используя flex-direction: column;.
.container { display: 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, так что демо будет иметь высоту по умолчанию даже без содержимого.
@media all and (min-width: 768px) { .container { flex-direction: row; flex-wrap: wrap; } header, footer { width: 100%; } main { flex: 2; order: 2; min-height: 80vh; } .left-sidebar { order: 1; flex: 1; } .right-sidebar { flex: 1; order: 3; } footer { order: 4; }
}Мы также переупорядочиваем элементы, используя свойство 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.
<div class="container"> <header>HEADER</header> <div class="content"> <main>MAIN CONTENT</main> <aside class="left-sidebar">LEFT SIDEBAR</aside> <aside class="right-sidebar">RIGHT SIDEBAR</aside> </div> <footer>FOOTER</footer> </div>
2.2 Начинаем с основных стилей
Основные стили CSS такие же, как в предыдущем примере:
/* RESET */
* { box-sizing: border-box; padding: 0; margin: 0;
}
/* COLORS and FONTS */
body { color: white; text-align: center; font-size: 24px; line-height: 3;
}
header { background: orangered;
}
main { background: darkslateblue;
}
footer { background: deeppink;
}
.left-sidebar { background: dodgerblue;
}
.right-sidebar { background: forestgreen;
}2.3 Добавьте правила FLEXBOX для мобильного представления
Правила flexbox для маленьких экранов такие же, как и раньше, однако теперь мы добавим их для двух flex-контейнеров. В результате все элементы контента на мобильных устройствах будут красиво отображаться друг над другом.
.container, .content { display: flex; flex-direction: column;
}2.4 Добавьте правила FLEXBOX для настольного представления
Мы используем ту же логику и для настольного представления. Однако теперь мы меняем только направление внутреннего контейнера (.content ). Таким образом, элементы header, .content и footer будут отображаться в виде столбца, а элементы main, .left- sidebar и .right-sidebar — в виде ряда в среднем столбце (.content).
Эти правила задают то же соотношение, что и в предыдущем методе — 2: 1: 1. Мы также определяем порядок внутренних flex-элементов, устанавливая для свойства order левой боковой панели значение 1, для основного содержимого — 2, а для правой боковой панели — 3.
@media all and (min-width: 768px) { .content { flex-direction: row; flex-wrap: wrap; } main { flex: 2; order: 2; min-height: 80vh; } .left-sidebar { order: 1; flex: 1; } .right-sidebar { flex: 1; order: 3; }
}Заключение
В этой статье мы рассмотрели два метода создания макета Святого Грааля с помощью flexbox — оба дают один и тот же результат. Поскольку ни один из них не превосходит другой, вы можете использовать тот, который вам больше нравится, или лучше соответствует остальной части вашего кода. Если вы хотите увидеть, как макет святого Грааля выглядит в реальной жизни, вы также можете посмотреть онлайн-демонстрации одноуровневых и двухуровневых методов.
Автор: DeveloperDrive Staff
Источник: https://www.developerdrive.com
Редакция: Команда webformyself.