От создателя: когда-то издавна (приблизительно 7 годов назад) я написала плагин jQuery для вычисления столбцов схожей высоты. Это гарантировало, что весьма специфичный сценарий строчки с 3-мя столбцами будет поддерживать поля содержимого равными по высоте, независимо от длины контента, которое они содержат. Доминирующий способ размещения в то время – float — не справлялся с данной неувязкой.
Решение Flexbox
Когда на сцену вышел flexbox, это сделалось вероятным благодаря последующему:
CSS
.flexbox {
display: flex;
}
| 123 | .flexbox { display: flex;} |
Умопомрачительно! По дефлоту прямые дочерние элементы выстраиваются в ряд и растягиваются по высоте идиентично.
Но потом вы добавляете два чуда .column в качестве дочерних и… содержимое столбцов опять смотрится неодинаковым по высоте.
Исправление:
CSS
.flexbox {
display: flex;
// Ensure content elements fill up the .column
.element {
height: 100%;
}
}
| 12345678 | .flexbox { display: flex; // Ensure content elements fill up the .column .element { height: 100%; }} |
Сейчас столбцы будут смотреться равными по высоте и растягиваться совместно с содержимым .element.
Сетка
В сетке мы сталкиваемся с схожим поведением:
CSS
.grid {
display: grid;
// Essentially switch the default axis
grid-auto-flow: column;
}
| 12345 | .grid { display: grid; // Essentially switch the default axis grid-auto-flow: column;} |
Подобно flexbox, прямые потомки будут иметь схожую высоту, но для их дочерних частей необходимо добавлять определение высоты, как в решении flexbox:
CSS
.grid {
display: grid;
grid-auto-flow: column;
// Ensure content elements fill up the .column
.element {
height: 100%;
}
}
Angular в 2020 году и далее
| 123456789 | .grid { display: grid; grid-auto-flow: column; // Ensure content elements fill up the .column .element { height: 100%; }} |
Вот демонстрация обоих решений, также доп демонстрации для определения установленного количества столбцов в строке, как описано ниже:
Что лучше?
Для обычного решения для сотворения частей схожей высоты преимущество flexbox состоит в том, что ось по дефлоту сходу включает параллельные столбцы, в то время как сетка обязана быть задана очевидно. Тем не наименее, элементы также не будут иметь схожую ширину (что быть может преимуществом зависимо от типа контента, к примеру, ссылок навигации).
Преимущество сетки заключается в разработке частей равной ширины, если это лучше. Доп преимуществом будет то, что для вас не нужен автоматический поток, а заместо этого вы сможете задать наибольшее количество столбцов в «строке». В этом случае сборка сетки просто обрабатывает арифметику для распределения столбцов по сопоставлению с решением flexbox, требующим определения вычисления для ограничения количества столбцов.
Обновить решение .grid для определения наибольшего числа .column 3 на строчку так же просто:
CSS
&.col-3 {
grid-gap: $col_gap;
grid-template-columns: repeat(3, 1fr);
}
| 1234 | &.col-3 { grid-gap: $col_gap; grid-template-columns: repeat(3, 1fr);} |
Принимая во внимание, что один (весьма обычной) вариант для flexbox был бы:
CSS
$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});
}
}
| 1234567891011121314 | $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
Редакция: Команда webformyself.
Источник