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

Разница при обёртывании.

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

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

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

Разница в “размерностях” Flexbox и Grid

Flexbox одномерен.

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

Grid двумерен.

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

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

Разница в иерархии между Flexbox и Grid

Правила Grid в основном определяются в родительском элементе, тогда как бОльшая часть разметки страницы с помощью flexbox происходит именно на дочерних элементах.

Разница в наложении между Flex и Grid.

Grid намного лучше справляется с наложением элементов друг на друга. Для создания такого эффекта в flex нам придётся прибегать к таким CSS инструментам как отрицательные значения margin, абсолютно позиционировать или применять трансформацию к элементам.

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

Гибкость и жёсткость Flex и Grid.

Grid более жёсткий. Гибкость Flexbox вытекает из его названия, и является его сильной стороной, однако точно контролировать размеры внутри родительского элемента с flex становится непросто. Приходится использовать комбинацию width, height, max-width, max-height, flex-basis, flex-base, flex-grow и flex-shrink, не говоря уж о содержащемся в дочерних элементах контенте, отступах и тд.

Grid же представляет собой решётку, в которой можно определять размеры ячеек, способность контент объединять ячейки, таким образом нам нужно лишь определить параметры решётки, и засунуть в её ячейки контент.

Flexbox может отодвигать элементы. Это свойство достаточно уникально, с flexbox вы можете например, установить margin-right: auto; и тем самым если будет свободное место этот элемент будет толкать следующий за ним контент так далеко как сможет.

Заключение.

Неплохо бы заранее иметь в голове идею о том, какой контент и как вы хотите располагать в вашем веб-приложении, чтобы сделать правильный выбор в сторону первого или второго. Допустим для создания игры шахматы, или отображения математических матриц, лучшим выбором будет Grid, а для меню, шапки или футера страницы проще будет использовать flex. Однако хоть этои не очень принято. но ничто не запрещает комбинировать эти два инструмента.

Записи блога по тегу - grid

Записи на русском языке