CSS Grid и CSS Flexbox самые известные, широко используемые технологии веб-верстки и горячо обсуждаемые в течение последних лет. Однако, несмотря на некоторые поверхностные сходства, они фактически используются для самых разных задач; каждая из них решает очень разный набор проблем и зачастую те проблемы, которые не способна решить иная технология. Вы и сами можете заметить, что для разных проектов используете разные сетки.
Тем не менее, у многих разработчиков возникает вопрос: когда и что использовать? Точнее даже, когда лучше подойдет именно Flexbox, а когда Grid, можно ли одно заменить другим и так далее. В действительности разобраться во всем этом несложно, но мы решили посмотреть детальнее на эти вопросы и обратить внимание на некоторые особенности обеих технологий.
Grid или Flexbox?
Частый вопрос, но банальный секрет в том, что знать нужно и то и другое, испробовать на практике обе технологии. Впоследствии веб-верстальщик попросту сможет сам осознать, что именно для его компонентов нужнее в данном проекте. Здесь невозможно сказать: «Прислушайтесь к своему «Я» и выберите то, что вам более нравится и более удобно в использовании в техническом плане». И Grid Layout, и Flexbox – это все CSS. И нет никакого значения, что вы пишете display: grid или display: flex, так как все равно вы используете общую их суть. И причина в том, что обе технологии основываются на правилах CSS Intrinsic and Extrinsic Sizing и спецификациях выравнивания Box Alignment.
В ранних материалах мы рассматривали для каких целей и почему верстальщики и разработчики используют разные фреймворки, например, React, Foundation, Vue и прочие. Но это отдельные масштабные инструменты. В случае же с сетками дела обстоят иначе. Они часть CSS, а CSS используется для обработки каждого отдельного элемента веб-дизайна. Соответственно, и это логично, применять можно и то и то, лишь бы выполнялись нужные требования и условия. Например, некоторые дизайнеры используют и не Flex и не Grid, а создают отдельную сетку-контейнер, в которой еще сетки, становящиеся элементами flex. И это практикуется, если особенности верстки и дизайна того требуют. Включили в строгую двумерную grid гибкие части flex. Тоже неплохо.
Flexbox в практике веб-верстки
Попробуйте спросить: «Зачем нужен автомобиль, а не велосипед». Суть в разных возможностях. Что предлагает Flexbox – его описание можно найти в базе MDN – выравнивание и распределение. Таким образом, если на странице есть множество элементов, а в мобильном варианте или при малом размере окна браузера эти элементы должны уже размещаться иначе – то и flex для этих целей как раз более необходим. При этом располагает он элементы так, чтобы контент было удобнее изучать, а значит, большим элементам много пространства, малым – меньше.
Иными словами, flex удобен и необходим при верстке адаптивных дизайнов; для элементов, у которых нет постоянного размера и не требующих строгих параметров разметки; когда от верстальщика (фигурально выражаясь) требуется только разместить все элементы рядом. Например, верстальщику необходима плавающая сетка (размеры изменяющиеся) и четкое разделение на строки. Можно по-разному подойти к решению этого вопроса: grid будет автоматически заполнять ячейки, а flex динамически заполнит эти же самые ячейки. Подходы к решению задачи будут разными, но и вид итоговый тоже.
В первом примере текстовые элементы размещены строго в ячейках (grid). Колонок не может быть больше или меньше, но высота ячеек будет варьироваться от объема текстового элемента. При таком варианте, если при auto-flow есть пустые ячейки, указать длину строки попросту невозможно.
Во втором примере при использовании технологии flex, элементы заполняют собой всё имеющееся пространство, а потому четкого размещения и выравнивания нет.
Но второй пример можно изменить и адаптировать, если для свойства flex-basis установить значение auto. Тогда текст в ячейках не будет переноситься на строки, а ширина ячеек будет «подгоняться» под полную длину текстового блока. Но при этом вся конструкция продолжит оставаться в пределах заданной ширины.
Одно дело примеры, другое – практическое применение. Вспомним, как часто всем нам приходится видеть список тегов, или как его раньше называли «облако тегов». Располагающиеся под статьями или в колонке справа-слева, короткие словосочетания или слова, кажется, что находятся «вперемешку» и не имеют никакой системности в расположении. В данном случае удобнее использовать Flexbox, так как задача состоит в том, чтобы заполнить всё выделенное пространство и разместить текст строго на строчках. Кажется, что это не тот вариант, когда требуются сетки (хоть какие-нибудь). Сетки нужны для того, чтобы выравнивать и размещать строго в колонках и строках. А в случае с тегами о какой-либо системности и речи быть не может.
Но вот наглядный пример, в котором технология flex отлично справляется с задачей. При разной длине каждого элемента, вся их совокупность выглядит очень ровненько и красиво, систематизировано.
Еще вариант необходимости flex – отцентрирование текста внутри элемента. Впрочем, вместо текста может быть и изображение, иконка или иной блок с данными. Но суть-то как раз в центрировании по вертикали и горизонтали.
В будущем (при наличии поддержки браузером тех свойств Box Alignment properties, что не используются во flex) мы сможем проделывать все примеры без необходимости включения сетки и свойства display: flex в контейнер. Но на сегодняшний момент включение в свой код данной строки CSS – обычная необходимость. И во всех примерах выше она присутствовала.
Для чего еще хорош Flexbox
Формы. Точнее для того, чтобы форма не развалилась при изменении ширины странницы. Наборы иконок, полей, небольших блоков, кнопок можно очень удачно скомпоновать, разместить, выровнять и при этом нисколько не задумываться о сложных вычислениях координат, положений относительно осей и так далее. Да, к тому же и размер полей будет адаптироваться под ширину формы.
Другой особенностью flex-сеток является динамическое расширение одной из ячеек при том, что остальные будут оставаться такими, какими были созданы изначально. Пример ниже в двух вариантах: по умолчанию и при увеличенном контенте в среднем блоке.
Таким образом, подводя итог того, когда и при каких вариантах лучше всего использовать Flexbox, нужно заметить, что он идеален при небольших сценариях, когда требуется все выровнять не просто по осям, а именно, заполняя свободное пространство. Но и так это делать, чтобы контент было удобно изучать. В то же время необходимо обратить внимание на тот факт, что если спустя время в веб-дизайн приходится что-то добавлять, то как раз технология flex подойдет для внедрения этих самых элементов лучше чем grid.
Grid – двумерная сетка – создает новую строку (переход на нее), если в одной много элементов (ячеек). А в большинстве случаев это неудобно и нежелательно. Flex же способен ужать всю строку и добавить новый элемент рядом на линии путем использования свойства flex-basis со значением auto или ноль (0).
И вот еще несколько примеров того, как используется flexbox и Grid Layuot на разных сайтах. Это и theguardian, новости, меню в виде шестиугольников, журнал.
Grid тоже бывает нужен
Несмотря на большую полезность flex-сеток, существуют варианты верстки и дизайна, когда от flex, при всем его кажущемся удобстве, нужно отказаться. Один из вариантов уже есть выше, когда все элементы были строго расположены в ячейках таблицы.
Суть в том, что Flex работает с одной большой линией, которая распределяется по строкам и представляет собой отдельный контейнер. А Grid, в свою очередь, создает макет из строк и столбцов, где каждая ячейка закрепляется за элементом. Отсюда несложно сделать логический вывод, что Grid CSS удобен тогда, когда элементы должны находиться в строгом выровненном порядке на странице, не менять своего положения. И размер самих элементов здесь роли не играет.
Иногда веб-мастера полагают, что Flexbox нужен только для элементов, а с помощью Grid делают общую разметку страницы. Ох, нет, не стоит так думать… На странице вполне могут находиться два-три элемента, которые требуют четкого размещения в структуре этой самой страницы, а потому как раз таки технология flex будет излишней.
Еще вариант преимущества Grid над Flexbox. Например, существует несколько динамических контейнеров с разными элементами, но вы хотите, чтобы они располагались рядом друг с другом или строго друг под другом и так далее. Их уместнее заключить в «строгую» Grid-сетку. Или можно с помощью Grid ограничить динамичность Flexbox и не позволить ему расширяться до бесконечности. Тут, разумеется, многое зависит от макета, но иногда это весьма удобно.
Также бывают варианты, когда с помощью flex’а создают статическую сетку, используя flex-grow = 0 и задавая процентный размер элементов. Но ведь аналогично мы поступаем и при работе с grid, поэтому не лишним будет задуматься, а зачем в данном варианте нужен flexbox? Не проще сразу использовать строгий и статичный Grid? На примере ниже создана таблица с технологией flex. Но стоит расширить один из элементов, как вся строгость рушится. Вопрос: «Строгость была нужна»? Если «да», то flex просто неуместен.
Завершение
Даже несмотря на то, что очень легко объяснить и понять, чем Grid Layout отличается от CSS Flexbox, все равно сказать точно, что именно использовать в данный конкретный момент бывает трудно. Тут подходит только вариант пробы обеих технологий. При этом всегда можно использовать и Grid и Flex одновременно или переключать шаблон с одной сетки на другую.
Мы постарались наглядно продемонстрировать и рассказать о том, как логически происходит выравнивание и определение размеров динамических элементов, как влияет на них статика. CSS Grid и Flexbox были созданы для решения разных задач и при этом Grid поддерживается браузерами гораздо хуже, чем Flexbox. В обозримом будущем положение дел для CSS Grid улучшится, и можно будет гораздо чаще использовать сочетание двух технологий. Сейчас такое сочетание возможно при условии, что сайт создается исключительно для современных версий браузеров.