От автора: давайте вкратце рассмотрим эту тему и попытаемся ответить без длинных объяснений. Существует много общего между Flexbox и Grid CSS, начиная с того, что они используются для разметки и являются гораздо более мощными, чем любая техника разметки, которая была до них. Они могут растягиваться и сжиматься, они могут центрировать вещи, они могут переупорядочивать вещи, они могут выравнивать вещи…
Существует множество ситуаций, в которых вы можете использовать любую из этих техник для выполнения того, что нам нужно, и множество ситуаций, где одна лучше подходит, чем другая. Поэтому стоит учить обе. Давайте сосредоточимся на различиях, а не на сходствах:
Flexbox можно переносить опционально. Если мы разрешаем переносы во flex-контейнере, элементы будут перенесены на другой ряд, когда заполнят текущий. Место, которое они занимают в следующем ряду, не зависит от того, что произошло в первом ряду, это позволяет нам создавать masonry-макеты.
Сетка также может переноситься по желанию (если мы разрешаем автозаполнение) в том смысле, что элементы могут заполнять строку и перемещаться в новую строку (или автоматически размещаться), но при этом они будут переходить вдоль тех же линий сетки, что и все остальные элементы.
Flexbox сверху, Grid снизу
Вы можете представить себе flexbox как «одномерный». Хотя flexbox может создавать строки и столбцы в том смысле, что он позволяет переносить элементы, нет способа декларативно контролировать, где заканчиваются элементы, поскольку элементы просто смещаются вдоль одной оси, а затем переносятся или не переносятся соответственно. Они делают то, что делают, если хотите, вдоль одномерной плоскости, и это связано с единственным измерением, которое мы можем применить — выровнять элементы вдоль базовой линии. Чего сетка не может.
.parent { display: flex; flex-flow: row wrap; /* OK элементы, размещайтесь в одну строку, пока будет место, а затем переноситесь */
}Вы можете представить Grid, как о «двухмерную, в которой мы можем (если хотим) объявить размер строк и столбцов, а затем явно размещать объекты в строках и столбцах по своему усмотрению.
.parent { display: grid; grid-template-columns: 1fr 3fr 1fr; /* Три колонки, одна из них в три раза шире остальных */ grid-template-rows: 200px auto 100px; /* Три колонки, две - с явными размерами */ grid-template-areas: "header header header" ". main sidebar" "footer . .";
} /* Теперь мы можем явно разместить элементы в указанных колонках и рядах.
*/
.child-1 { grid-area: header;
} .child-2 { grid-area: main;
} .child-3 { grid-area: sidebar;
} .child-4 { grid-area: footer;
}
Flexbox сверху, Grid снизу
Я не большой поклонник различий между сеткой «1D» и «2D» для Flexbox и Grid, только потому, что по большей части я использую сетку, как «1D», и она отлично подходит для этого. Я бы не хотел, чтобы кто-то подумал, что он должен использовать flexbox, а не grid, потому что grid — это только когда вам нужно 2D. Это является существенным отличием, так как 2D макет можно создать с помощью Grid так, как это нельзя сделать с помощью Flexbox.
Grid в основном определяется для родительского элемента. В flexbox большая часть макета (помимо самых простых) определяется через дочерние элементы.
/* Дочерние flex-элементы выполняют основную часть работы
*/
.flexbox { display: flex; > div { &:nth-child(1) { // лого flex: 0 0 100px; } &:nth-child(2) { // поиск flex: 1; max-width: 500px; } &:nth-child(3) { // аватар flex: 0 0 50px; margin-left: auto; } }
} /* В grid контейнер выполняет основную часть работы
*/
.grid { display: grid; grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr; grid-template-rows: 100px repeat(3, auto) 100px; grid-gap: 10px;
}Grid лучше обрабатывает перекрытия. Чтобы элементы перекрывались во flexbox, необходимо использовать традиционные вещи, такие как отрицательные поля, преобразования или абсолютное позиционирование, чтобы вырваться из поведения flex. С помощью Grid мы можем размещать элементы на перекрывающихся линиях сетки или даже точно в тех же ячейках сетки.
Flexbox сверху, Grid снизу
Сетка устойчивее. Хотя гибкость flexbox иногда является его преимуществом, способ определения размера flex-элемента становится довольно сложным. Это сочетание width, min-width, max-width, flex-basis, flex-grow, и flex-shrink, не говоря уже содержимом внутри и тому подобном white-space, а также других элементах в той же строке. Grid имеет интересные функции растягивания, такие как фракционные единицы, и возможность содержимого разбивать сетки, хотя в целом мы устанавливаем линии сетки и помещаем в них элементы, которые смещаются прямо.
Flexbox может смещать вещи. Это довольно уникальная особенность flexbox, вы можете, например, применить для элемента margin-right: auto;, и, если есть место, этот элемент будет смещать все остальное настолько далеко, насколько это возможно.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.