Русский
Русский
English
Статистика
Реклама

Перевод Современные решения старых CSS-задач (2 часть) Элементы одинаковой высоты Flexbox vs Grid

Приветствую. Представляю вашему вниманию перевод статьи Equal Height Elements: Flexbox vs. Grid, опубликованной 9 апреля 2020 года автором Stephanie Eckles



Это вторая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.


Однажды (приблизительно 7 лет назад) я написала JQuery-плагин, который работал с тремя колонками, расположенными на одной строке. А именно, рассчитывал и задавал одинаковую высоту для элементов, независимо от количества содержимого в каждом из них. Метод вёрстки на float, который был тогда основным, не мог справиться с этой проблемой.


Решение с помощью Flexbox


С появлением Flexbox достижение такого поведения стало возможно благодаря добавлению всего одного свойства:


.flexbox {  display: flex;}

Удивительно! В этом случае прямые потомки по умолчанию выстраиваются в строку и имеют одинаковую высоту.



Но если содержимое будет храниться в дополнительном элементе, вложенном в .column, высота колонок с разным количеством контента снова будет отличаться.



Чтобы исправить это, вложенному элементу следует задать высоту 100%


.flexbox {  display: flex;}/* Гарантия, что вложенные элементы с содержимым будут заполнять высоту колонок */.element {    height: 100%;}

Колонки снова станут равной высоты и будут расти вместе с содержимым вложенного элемента .element.


Решение с помощью Grid


Используя Grid, мы сталкиваемся с похожим поведением:


.grid {  display: grid;  /* Смена оси автоматического размещения элементов */  grid-auto-flow: column;}

Подобно Flexbox, прямые потомки будут иметь одинаковую высоту, но их дети нуждаются в явном определении высоты, как и в способе с использованием Flexbox:


.flexbox {  display: grid;  grid-auto-flow: column;}/* Гарантия, что элементы с содержимым будут заполнять элементы колонок */.element {    height: 100%;}

Ниже представлена Codepen-демонстрация обоих решений для разного количества колонок в строке:



Какой способ лучше?


Для решения проблемы с равной высотой элементов, преимущество Flexbox в том, что ось по умолчанию позволяет сразу выстроить колонки рядом друг с другом, тогда как в Grid её нужно менять явно. Кроме того, элементы также не будут иметь одинаковую ширину (что может быть преимуществом для определённых типов содержимого, например, навигационных ссылок).


Преимуществом Grid в том, что столбцам можно задать равную ширину, если в этом есть необходимость. Также, в случае необходимости, можно указать желаемое максимальное количество столбцов на "строку". В этом случае Grid-макет с легкостью справляется с расчётами для автоматического распределения пространства между столбцами, в то время как Flexbox требует ручного задания расчётов для ограничения количества колонок.


Обновим наше решение с использованием Grid для 3 элементов .column на строке:


&.col-3 {  grid-gap: $col_gap;  grid-template-columns: repeat(3, 1fr);}

В то время, как для Flexbox самый простой вариант был бы таким:


$col_gap: 1rem;.flexbox.col-3 {  /* Требует явного разрешения переноса не помещающихся элементов на новую строку */  flex-wrap: wrap;  .column {    /* Альтернатива свойству "gap" */    margin: $col_gap/2;    /* Расчёты ширины колонок    max-width: calc((100% / 3) - #{$col_gap});  }}

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

Источник: habr.com
К списку статей
Опубликовано: 22.07.2020 14:19:29
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Css

Html

Разработка веб-сайтов

Web development

Frontend

Layout

Верстка

Категории

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

© 2006-2021, personeltest.ru