Flex блоки на примере шапки
Flex блок представляет собой flex-контейнер, внутри которого вдоль основной оси, расположены flex-элементы. Это легко представить в виде шашлыка, где шампур - это главная ось, а нанизанные на него кусочки мяса - элементы.
Суть работы flex блоков
Главная и поперечная ось имеют свои размеры и они могут меняться друг с другом местами. Если вы держите шашлык горизонтально в процессе нанизывания мяса, то главная ось принимает горизонтальное положение (flex-direction: row). А когда приготовленный шашлык переворачивают острием вниз, чтобы отправить кусочки мяса в тарелку, то главная ось (шампур) принимает вертикальное положение (flex-direction: column). На способности перестраивания flex-элементов из горизонтального положения (row), в вертикальное (column) и построена адаптивность сайта.
Пока ширина экрана (десктопы) у пользователя позволяет адекватно показывать все элементы в ряду, у flex-контейнера по умолчанию выставлено свойство flex-direction: row. Но как только ширина экрана (смартфоны) уменьшается и flex-элементы перестают помещаться в одном ряду, тогда на нужной контрольной точке, мы меняем ориентациию главной оси (переворачиваем шампур вниз) и элементы перестраиваются в колонку (flex-direction: column).
Flex-контейнер является родителем для flex-элементов и к нему может применяться только одна часть CSS свойств. Для дочерних flex-элементов предназначена другая часть CSS свойств.
Свойства для контейнера
- justify-content отвечает за расположение элементов по основной оси
- align-items вытягивает элементы вдоль основной оси
- align-content вытягивание элементов по вспомогательной оси
Свойства для элементов
- order меняет порядок расположения элементов прямо в CSS стилях, не касаясь HTML разметки.
- flex-grow отвечает за растягивание отдельного элемента (жадность). Можно растянуть отдельный элемент внутри flex блока, при условии наличия свободного места.
- flex-shrink наоборот ужимает элемент, когда недостаточно места внутри flex-контейнера.
- flex-basic - это некий аналог ширины и высоты в зависимости от направления основной оси. Для горизонтального направления flex-basic отвечает за ширину, а для вертикального - за высоту.
- flex укороченная запись для flex-grow, flex-shrink и flex-basic.
- align-self выравнивает отдельно взятый элемент
Рассмотрим на конкретном примере, как применять технологию flex блоков для адаптивной верстки шапки сайта. Узнаем, как правильно использовать основные свойства flex блоков.
Шапка (логотип + меню)
Семантический тег header говорит, что перед нами шапка сайта, назначим его flex-контейнером. Внутри которого у нас будет два flex-элемента: логотип и меню навигации. Обернем логотип в обертку с классом wrap-logo для управляемости. Сделаем так же и для пунктов меню li, тег nav будет служить для них оберткой.
<header>
<div class="wrap-logo">
<img src="logo.jpg" alt="">
</div>
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
</nav>
</header>
Оба элемента будут находиться в ряду, поэтому достаточно контейнеру задать display: flex. Свойство flex-direction: row; прописывать необязательно, так как оно идет по умолчанию для горизонтального направления главной оси. Как мы хотим расположить элементы вдоль главной оси? Предположим что в макете для верстки: логотип прибит к левому краю, а меню к правому. Свойства justify-content отвечает за выравнивание элементов (логотипа и навигации) вдоль главной оси. Если мы выберем значение space-between, то первый и последний элементы прибьются к краям контейнера. Тогда остальные элементы, если таковые имеются, равномерно распределят между собой все свободное постранство.
Так же flex-элементы могут быть выровнены по поперечной оси:
- по верхнему краю
- по нижнему краю
- по центру
- по базовой линии
В данном примере, мы выровняли логотип и меню по центру.
// flex-контейнер
header {
display: flex;
justify-content: space-between;
align-items: center;
}
Обертки nav и wrap-logo в свою очередь служат flex-контейнерами для логотипа и пунктов меню.
// flex-контейнер + flex-элемент
.wrap-logo {
display: flex;
}
Ссылки меню расположены в ряд.
// flex-контейнер + flex-элемент
nav ul {
display: flex;
align-items: center;
}
Совет
Наша шапка смотрится хорошо при минимальном разрешении экрана в 486 пикселей. Если поставлена задача, адаптировать сайт для ещё меньших экранов, то целесообразнее всего будет скрыть меню за кнопкой гамбургер.
-
Создано 27.01.2020 10:29:59
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.