CSS Grid и Flexbox: сравнение на практике. Полное руководство по Flexbox Краткая запись направления и многострочности: flex-flow

В этой cтатье мы с Вами продолжим изучать вопросы, касающиеся современной нативной верстки страниц сайта с помощью каскадных таблиц стилей с использованием модели Flexbox .

В предыдущей статье мы научились работать и производить всевозможные настройки флекс контейнеров с использованием современных CSS свойств, но этого недостаточно для того, чтобы решать многие задачи, связанные с версткой сайта.

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

Порядок следования элементов

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

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

Обращаю Ваше внимание, что если вы указываете значение свойства для одного флекс элемента в контейнере, то это не будет являться его порядковым номером , а указывает только на "вес" его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1, например, смещает элемент к левому краю родительского контейнера). Значение по умолчанию 0.

Схематичное отображение работы свойства отображено на следующем изображении:


В этом учебнике мы уже неоднократно сталкивались со свойством , благодаря которому, вы можете управлять видимостью элементов по оси z, принцип указания значений свойства аналогичен. Вы можете использовать в своей работе любые значения, которые будут вам интуитивно понятны, например, 100 , 200 , 300 и тому подобные.

Пример изменения следования элементов в колоннах

Order: -1;

A
B
C
D
E

Order: 1;

A
B
C
D
E

Order: 2;

A
B
C
D
E

В этом примере мы разместили три пять элементов

четвертого элемента в определенном контейнере следующие значения свойства :

Обращаю Ваше внимание на то, что отрицательные значения свойства не допускаются. Значение по умолчанию 0 - элементы не будут увеличиваться.

Перейдем к рассмотрению примера:

Использование свойства flex-grow
class = "container" >
1
2
1
1
3
1
1
4
1

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

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

В первом контейнере второй элемент будет увеличен на 2 по отношению к остальным флекс элементам, во втором контейнере на 3, а в третьем уже на четыре . Обратите внимание, как пропорцианально изменятся ширина элементов, не прибегая с нашей стороны к каким-либо расчетам, или использованию дополнительных функций.

В первом контейнере указали для второго флекс элемента размер по умолчанию 100px , во втором контейнере 100px , а в третьем уже 10000px . Обратите внимание, что в третьем контейнере элемент не смотря на его размеры не вызвал переполнение, а подстроился под оставшееся в родительском контейнере пространство.

Значение, определяющее на сколько будет уменьшен блок по отношению к остальным флекс элементам в контейнере (при недостатке свободного пространства) задается по аналогии со свойством , но при этом значением по умолчанию будет 1, а не 0. Отрицательные значения так же не допускаются (не валидны).

Свойство со значением 0 определяет, что элемент не будет сжиматься, сохраняя при этом необходимую ширину элемента! Если вместе с этим значением указано минимальное значение ширины флекс элемента по умолчанию (свойство ), то элемент не сможет уменьшиться меньше этого значения. Используйте эту возможность осмысленно, так как существует вероятность переполнения содержимого флекс контейнера. Этот момент мы рассмотрим в конце статьи

Перейдем к рассмотрению примера:

Использование свойства flex-shrink
class = "container" >
1
2
1
1
3
1
1
4
1

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

Дэнни Марков

Дизайн довольно простой - он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:

  1. Разместить четыре основных раздела макета.
  2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
  3. Выровнять содержимое шапки - навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

Испытание 1. Размещение разделов страницы

Решение на Flexbox

Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.

Container { display: flex; flex-direction: column; }

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

Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.

Main-and-sidebar-wrapper { display: flex; flex-direction: row; }

Последний шаг - задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.

Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.

Решение на CSS Grid

Существует несколько вариантов использования CSS Grid, но мы воспользуемся синтаксисом grid-template-areas , как наиболее подходящего для наших целей.

Сперва мы определим четыре grid-area , по одному на каждый раздел страницы:

header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } footer { grid-area: footer; }

Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.

Container { display: grid; /* Определяем размер и число колонок нашей сетки. Единица fr работает подобно Flexbox: колонки делят свободное пространство в строке согласно их значениям. У нас будет две колонки - первая в три раза больше второй. */ grid-template-columns: 3fr 1fr; /* Связываем сделанные ранее области с местами в сетке. Первая строка - шапка. Вторая строка делится между основным разделом и боковой панелью. Последняя строка - подвал. */ grid-template-areas: "header header" "main sidebar" "footer footer"; /* Интервал между ячейками сетки будет 60 пикселей */ grid-gap: 60px; }

Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding .

Испытание 2. Делаем страницу адаптивной

Решение на Flexbox

Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin .

@media (max-width: 600px) { .main-and-sidebar-wrapper { flex-direction: column; } .main { margin-right: 0; margin-bottom: 60px; } }

Наша страница довольно простая, поэтому в медиа-запросе мало работы, но в более сложном макете придётся много чего переделывать.

Решение на CSS Grid

Поскольку мы уже определили grid-areas , нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.

@media (max-width: 600px) { .container { /* Выравнивание областей сетки для мобильного макета */ grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; } }

Или можем переопределить весь макет с нуля, если считаем, что это решение чище.

@media (max-width: 600px) { .container { /* Переделываем сетку в одноколоночный макет */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; } }

Испытание 3. Выравнивание компонентов шапки

Решение на Flexbox

Мы уже делали похожий макет на Flexbox в одной из наших старых статей - . Техника довольно простая:

Header { display: flex; justify-content: space-between; }

Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри

© premier-catering.ru