В чем разница между Flexbox и Grid CSS?

В чем разница между Flexbox и Grid CSS?

От автора: давайте вкратце рассмотрим эту тему и попытаемся ответить без длинных объяснений. Существует много общего между Flexbox и Grid CSS, начиная с того, что они используются для разметки и являются гораздо более мощными, чем любая техника разметки, которая была до них. Они могут растягиваться и сжиматься, они могут центрировать вещи, они могут переупорядочивать вещи, они могут выравнивать вещи…

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

Flexbox можно переносить опционально. Если мы разрешаем переносы во flex-контейнере, элементы будут перенесены на другой ряд, когда заполнят текущий. Место, которое они занимают в следующем ряду, не зависит от того, что произошло в первом ряду, это позволяет нам создавать masonry-макеты.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Flexbox сверху, Grid снизу

Вы можете представить себе flexbox как «одномерный». Хотя flexbox может создавать строки и столбцы в том смысле, что он позволяет переносить элементы, нет способа декларативно контролировать, где заканчиваются элементы, поскольку элементы просто смещаются вдоль одной оси, а затем переносятся или не переносятся соответственно. Они делают то, что делают, если хотите, вдоль одномерной плоскости, и это связано с единственным измерением, которое мы можем применить — выровнять элементы вдоль базовой линии. Чего сетка не может.

Вы можете представить Grid, как о «двухмерную, в которой мы можем (если хотим) объявить размер строк и столбцов, а затем явно размещать объекты в строках и столбцах по своему усмотрению.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Flexbox сверху, Grid снизу

Я не большой поклонник различий между сеткой «1D» и «2D» для Flexbox и Grid, только потому, что по большей части я использую сетку, как «1D», и она отлично подходит для этого. Я бы не хотел, чтобы кто-то подумал, что он должен использовать flexbox, а не grid, потому что grid — это только когда вам нужно 2D. Это является существенным отличием, так как 2D макет можно создать с помощью Grid так, как это нельзя сделать с помощью Flexbox.

Grid в основном определяется для родительского элемента. В flexbox большая часть макета (помимо самых простых) определяется через дочерние элементы.

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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий