От автора: когда-то давно (примерно 7 лет назад) я написала плагин jQuery для вычисления столбцов одинаковой высоты. Это гарантировало, что очень специфический сценарий строки с тремя столбцами будет поддерживать поля содержимого равными по высоте, независимо от длины контента, которое они содержат. Доминирующий метод размещения в то время – float — не справлялся с этой проблемой.
Решение Flexbox
Когда на сцену вышел flexbox, это стало возможным благодаря следующему:
.flexbox { display: flex;
}Удивительно! По умолчанию прямые дочерние элементы выстраиваются в ряд и растягиваются по высоте одинаково.
Но затем вы добавляете два дива .column в качестве дочерних и… содержимое столбцов снова выглядит неодинаковым по высоте.
Исправление:
.flexbox { display: flex; // Ensure content elements fill up the .column .element { height: 100%; }
}Теперь столбцы будут выглядеть равными по высоте и растягиваться вместе с содержимым .element.
Сетка
В сетке мы сталкиваемся с похожим поведением:
.grid { display: grid; // Essentially switch the default axis grid-auto-flow: column;
}Подобно flexbox, прямые потомки будут иметь одинаковую высоту, но для их дочерних элементов нужно добавлять определение высоты, как в решении flexbox:
.grid { display: grid; grid-auto-flow: column; // Ensure content elements fill up the .column .element { height: 100%; }
}Вот демонстрация обоих решений, а также дополнительные демонстрации для определения установленного количества столбцов в строке, как описано ниже:
Что лучше?
Для простого решения для создания элементов одинаковой высоты преимущество flexbox заключается в том, что ось по умолчанию сразу включает параллельные столбцы, в то время как сетка должна быть задана явно. Тем не менее, элементы также не будут иметь одинаковую ширину (что может быть преимуществом в зависимости от типа контента, например, ссылок навигации).
Преимущество сетки заключается в создании элементов равной ширины, если это желательно. Дополнительным преимуществом является то, что вам не нужен автоматический поток, а вместо этого вы можете задать максимальное количество столбцов в «строке». В этом случае компоновка сетки легко обрабатывает математику для распределения столбцов по сравнению с решением flexbox, требующим определения вычисления для ограничения количества столбцов.
Обновить решение .grid для определения максимального числа .column 3 на строку так же просто:
&.col-3 { grid-gap: $col_gap; grid-template-columns: repeat(3, 1fr);
}Принимая во внимание, что один (очень простой) вариант для flexbox был бы:
$col_gap: 1rem; .flexbox.col-3 { // Explicitly needs to be defined to wrap // overflow items to the next virtual row flex-wrap: wrap; .column { // "hack" for no gap property margin: $col_gap/2; // define calculation for browser to use on the width max-width: calc((100% / 3) - #{$col_gap}); }
}Вам также нужно подумать о том, как быстро обрабатываются эти решения, но это немного выходит за рамки данной статьи.
Автор: Stephanie Eckles
Источник: https://dev.to
Редакция: Команда webformyself.