Какая разница между Flexbox и Grid ?
Существует достаточно много сходств между 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 или Flex? Кто лучше?
Пользуюсь активно flex , все задачи с ним решаю при верстке. Но много кто говорит, что grid это наше будущее. Так ли он хорош, и что лучше использовать?
Отслеживать
user262779
задан 25 янв 2019 в 11:44
bla bla213213213 bla bla213213213
774 4 4 серебряных знака 20 20 бронзовых знаков
Все зависит от задачи, гриды позволяют работать как по горизонтали так и по вертикали. Гриды удобней использовать для раскладки основных блоков, а для остального flex .
25 янв 2019 в 11:49
По мне, grid- это тот же html-grid, только на CSS. То есть представляешь таблицу и объединяешь несколько колонок в одну, несколько строк в одну, во флексе с этим дела потруднее.
25 янв 2019 в 11:50
Т.е. большие блоки на сайте стоит размещать на гриде, а внутри них на флексе?
25 янв 2019 в 11:55
Это не является обязательным, нужно делать так как вам удобней и того требует задача. Сайты можно полностью сделать на flex или grid , но есть ситуации когда проще воспользоваться конкретным инструментом. По ссылке есть пример который я делал на bootstrap (т.е. на flex ),а на гридах его можно было бы сделать за пару строк кода и с меньшим количеством html .
25 янв 2019 в 12:06
Все верно говорят, зависит от задачи, но хочу добавить, что поддержка гридов сейчас 88% в то время как flex 95, поэтому без особой необходимости в гридах, прекрасно можно обойтись флексами. Думаю где-то через год уже можно будет комбинировать их без оглядки на старые браузеры, как это было с флексами
25 янв 2019 в 14:38
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Зависимо от задачи. Например, если нужно спроектировать React-компоненты для позиционирования дочерних элементов, то следует использовать Grid: Как в Chrome, так и в Safari используется движок отображения webkit и он плохо дружит с flex.
В этом вопросе можно посмотреть код, корректно отображающийся в FireFox и не работающий в Chrome. Вопрос был задан в 2015 и до сих пор не закрыт!
Тем не менее, если вложенных flex-контейнеров не предвидится, их тоже можно использовать.
Отличия между Flexbox и CSS Grid для верстальщика
Flexbox и CSS Grid не являются взаимозаменяемыми инструментами, а наоборот — используются как взаимодополняемые технологии, тесно сотрудничающие друг с другом. И если с помощью CSS Grid можно обозначить макет и создать его основу, то Flexbox позволит расставить и выровнять элементы внутри этого макета.
Flexible box (flexbox) — это гибкий модуль раскладки и выравнивания элементов, появившийся в CSS 3. Flexbox позиционируется как одномерная система распределения элементов, когда они могут располагаться только по одному направлению: либо строка, либо столбец.
CSS Grid — это тоже модуль CSS 3, но уже разработанный как двумерная система, с помощью которой можно манипулировать как строками, так и колонками.
Flexbox и CSS Grid не являются взаимозаменяемыми инструментами, а наоборот, используются как взаимодополняемые технологии, тесно сотрудничающие друг с другом. И если с помощью CSS Grid можно обозначить макет и создать его основу, то Flexbox позволит расставить и выровнять элементы внутри этого макета.
С появлением данных модулей у верстальщиков появилось неограниченное поле возможностей для реализации задумок дизайнеров и тех кто проектирует шаблоны для сайтов.
С помощью Flexbox можно строить небольшие макеты. CSS Grid позволяет компенсировать ограничение возможностей Flexbox и строить сложные сетки. Совместное же использование этих спецификаций позволяет создавать по истине гибкие и невероятно практичные макеты с точки зрения своего функционала.
Решающая CSS битва: Grid против Flexbox
Узнайте, чем они отличаются и когда их нужно использовать вместе.
5 min read
Dec 21, 2017
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
CSS Flexbox стал крайне популярным среди Front-end разработчиков за последние несколько лет. И это не удивительно, поскольку теперь стало легче создавать динамические шаблоны и выравнивать контент внутри контейнеров.
Однако, на районе появился новый парниша по имени CSS Grid и у него очень много тех же возможностей, что и у Flexbox. В одних случаях, он даже лучше, чем Flexbox, в то время как в других совершенно нет.
Такой расклад событий вводит разработчиков в смятение. Поэтому, в этой статье мы сравним два модуля, как на микро, так и на макро уровнях.
Одномерное против двумерного
Если вы хотите получить урок из этой статьи, то пусть он пусть он будет таким. Flexbox это одномерные макеты, а Grid это двумерные.
Это означает, что если вы раскладываете объекты в одном направлении, к примеру, кнопку в header, то вам нужно применять Flexbox.
Это даст вам больше гибкости, чем в случе с CSS Grid. Также с этим будет проще работать в дальнейшем, а самое важное вы избежите лишней писанины.
Однако, если вы собираетесь создать целый макет в двух измерениях, как с row , так и с column — то вам нужно использовать CSS Grid.
В этом случае с CSS Grid вы получите больше гибкости, да и ваша разметка будет проще, а код станет понятнее для дальнейшей работы.
Теперь вы конечно же можете комбинировать оба метода. В примере выше, было бы идеально использовать Grid для всего макета, а затем Flexbox для выравнивания контента внутри header. Таким образом вы воспользуетесь лучшим от двух «взглядов на мир».
В общем, ближе к концу статьи вы увидите, как именно это сделать .
Упор на контент или на макет?
Ещё одно кардинальное отличие в том, что Flexbox берет за основу контент, в то время как в основе Grid лежит сам макет и его общая разметка. С первых слов это всё довольно абстрактно, поэтому давайте взглянем на конкретный пример, который позволит нам легче понять суть того, что происходит.
Мы будем использовать header из предыдущего параграфа. Вот как выглядит его HTML.
Home
Search
Logout
Перед тем как мы зафлексбоксим макет, эти дивы будут располагаться друг над другом. Как тут:
Flexbox header
Итак, когда мы укажем display: flex все элементы аккуратненько встанут в линию.
header display: flex;
>
Для того, чтобы отправить кнопку logout в правый угол, мы просто укажем нужный элемент и зададим ему внешний отступ.
header > div:nth-child(3) margin-left: auto;
>
Это даст нам такой результат:
Что нужно тут знать, так это то, что мы дали элементам самим решить как им расположиться. Изначально не предопределялось ничего, кроме display: flex .
Это основное различие между Flexbox и Grid и сейчас это станет ещё понятнее, после того как мы переделаем header на Grid’ах.
Пусть даже CSS Grid не задуман для создания одномерных header’ов, это всё же хороший пример для проработки в этой статье, так как он научит понимать основные понятия между Flexbox и Grid.
Grid header
Мы можем создать наш header несколькими разными способами с помощью CSS Grid. Тут же мы увидим довольно понятный способ, где у grid есть десять колонок, каждая из которых является частью формирования ширины элемента.
header display: grid;
grid-template-columns: repeat(10, 1fr);
>
Это будет идентично решению через Flexbox.
Но давайте взглянем поглубже и посмотрим в чем же разница. Зайдем в Chrome inspector, чтобы увидеть границы колонок.
Ключевое различие тут в том, что мы должны сначала выставить определения колонок макета. Начиная с определения ширины колонок и потом выставляя контент в доступные ячейки grid.
Этот подход заставил нас четко определить позицию, на сколько колонок мы хотим разделить header.
Пока мы не изменим сетку, выходит, что мы застряли с этими десятью колонками. Это ограничение, с которым бы мы не столкнулись, имея дело только с Flexbox.
Для того, чтобы кнопку logout поставить в конец секции справа, мы поставим этот элемент DOM в десятую колонку, как тут:
header > div:nth-child(3) grid-column: 10;
>
Вот как это будет выглядеть при детальном виде расположения колонок.
Мы не могли просто задать этому элементу margin-left: auto; , потому что кнопка logout уже была помещена в конкретную ячейку макета, а именно в третью колонку. И чтобы сдвинуть её, нам нужно найти ещё одну ячейку.
Совмещаем два подхода
А теперь давайте посмотрим, как применять два эти подхода вместе, объединяя header со всем нашим макетом. Мы начнем с построения самого макета.
Вот разметка:
HEADER
CONTENT
Вот CSS:
.container display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
>
Вот так мы расставим элементы по сетке:
header grid-column: span 12;
>aside grid-column: span 2;
>main grid-column: span 10;
>footer grid-column: span 12;
>
Теперь мы просто добавим header. Его мы зафлексбоксим, хотя он уже является элементом нашего Grid CSS.
header display: flex;
>
Теперь мы можем установить кнопку logout справа.
header > div:nth-child(3) margin-left: auto;
>
И теперь, у нас идеальный макет, который использует как Grid, так и Flexbox. Вот как выглядят оба контейнера.
Итак, теперь у вас имеется четкое понимание основ и конкретных различий между Flexbox и Grid, и самое важное — это понимание того, как использовать их вместе.
Поддержка браузеров
Перед тем как мы закончим, также надо упомянуть о поддержке браузерами. На момент написания этой статьи, 77% глобального трафика сайтов поддерживали CSS Grid и этот показатель постоянно растет.
Скорее всего, 2018 будет годом CSS Grid. Это будет его прорывом и он станет необходимым навыком для front-end разработчика. Точно также как это было с CSS Flexbox несколько лет назад.