После повсеместного внедрения CSS Grid Layout в кругах
Теперь Grid поддерживается всеми основными браузерами так же, как и Flexbox. Но ответ на вопрос таков: да, Flexbox
В этой статье я собираюсь предложить несколько способов помочь вам решить, когда использовать Flexbox и когда использовать Grid, когда вы занимаетесь своими проектами
Чтобы освоить Flexbox, Grid и многие другие расширенные функции CSS3, ознакомьтесь с CSS Master, 3rd Edition.
Что такое флексбокс?
CSS Flexible Box Layout, или для краткости Flexbox, начал появляться в браузерах примерно в 2012 году. В течение многих лет
могут быть расположены в любом направлении и могут «изгибать» свои размеры, либо увеличиваясь, чтобы заполнить неиспользуемое пространство, либо уменьшаясь, чтобы избежать переполнения родительского элемента. Как горизонтальное, так и вертикальное выравнивание дочерних элементов можно легко манипулировать. Вложение этих блоков (горизонтальное внутри вертикального или вертикальное внутри горизонтального) может использоваться для построения макетов в двух измерениях.
С появлением Flexbox такие вещи, как создание столбцов одинаковой длины независимо от объема их содержимого, центрирование элементов как по горизонтали, так и по вертикали, выравнивание и размещение навигационных ссылок вдоль горизонтальной линии и многое другое, стали намного проще.
Обернуть столбцы внутри гибкого контейнера достаточно, чтобы получить столбцы одинаковой длины. Проверьте это!
Что касается центрирования содержимого как по горизонтали, так и по вертикали, это вопрос добавления следующих строк кода в контейнер flex:
.hero {
display: flex;
/* centers vertically */
/* centers horizontally */
}
Вот демо:
Наконец, выстраивание множества ссылок еще никогда не было таким безболезненным:
.
display: flex;
/* shortcut to specify direction (horizontal) and wrapping behavior */
gap: 1rem;
}
Вы можете увидеть демо этого на CodePen.
Чтобы ознакомиться с тем, как работает Flexbox, а также в качестве быстрого ознакомления с его свойствами и значениями, взгляните на ссылки ниже:
Дружественное введение в Flexbox для начинающих на SitePoint
Введение в Mozilla Flexbox
Шпаргалка Flexbox от
Что за флексбокс?! видео серия Веса Боса
Итак, это Flexbox в двух словах. Давайте теперь продолжим и посмотрим на Grid.
Что такое
В марте 2017 года CSS Grid Layout начал получать широкую поддержку браузеров. В соответствии со спецификацией Grid макет Grid —
новая модель макета для CSS, которая имеет мощные возможности для управления размером и расположением блоков и их содержимого.
С Grid возможность создавать все виды надежных макетов в Интернете значительно возросла, настолько, что Джен Симмонс, эксперт CSS и известный защитник Grid, поощряет
Благодаря Grid легко создать сложный макет, который вообще не использует много кода, не требует плавающих элементов или других хаков и не вызывает головной боли.
Вот демо CodePen. (Обратите внимание, что сетка работает только на более широких экранах.)
В этой демонстрации, чтобы создать базовую сетку для всей страницы в полном размере, я превратил свой контейнер divв контейнер сетки, а затем разделил его на столбцы и строки:
.container {
display: grid;
}
Единица fr— это новая гибкая единица измерения, представленная в CSS Grid Layout. Часть frсокращена от дробной, так как она представляет часть доступного пространства в контейнере сетки. Использование fr, а не фиксированной единицы, такой как px, означает, что браузер может выполнить математические расчеты, необходимые для создания макета, что, как мне кажется, предпочтительнее в большинстве случаев.
Как только сетка будет готова, самое время поместить в нее дочерние элементы. Есть несколько разных способов сделать это. В приведенной выше демонстрации я использовал номера линий сетки и свойство
.main {
/* row start, row end, col start col end */
}
Когда все секции размещены в сетке, вот как это выглядит:
Макет страницы с помощью CSS Grid
Для получения более подробной информации и полезных шпаргалок перейдите по ссылкам ниже:
Учебники SitePoint «Введение в макет CSS Grid «и «Создание макетов с помощью CSS Grid «.
Сетка Рэйчел Эндрю на примере
Jen Simmons’ s Experimental Layout Lab
Руководство по компоновке сетки MDN CSS
Курс CSS Grid Уэса Боса
Grid или Flexbox: что выбрать?
Почувствовав, на что способны Grid и Flexbox, пришло время вернуться к исходному вопросу. Когда одно предпочтительнее другого?
Вот тема в Твиттере, которую Крис Койер запустил пару лет назад, в основном задавая тот же вопрос:
Для всех, кто понимает как CSS grid, так и flexbox, какой ваш любимый способ объяснить разницу?
Как и следовало ожидать, появилось несколько интересных ответов, большинство из которых я разобрал под заголовками ниже.
Сетка для макета страницы и Flexbox для компонентов
«Сетка для макета страницы и Flexbox для компонентов» — пожалуй, самый интуитивный ответ, который можно было бы дать на этот вопрос. На самом деле, у меня не было бы никаких сомнений относительно того, какую технологию я бы использовал при кодировании всего макета страницы. Вы можете делать макеты страниц с помощью Flexbox — и действительно, это то, что большинство из нас делало до того, как Grid вышел на сцену. Но создание сетки с помощью flexbox никогда не было
Оказывается, Grid также отлично подходит для создания компонентов, которые будут размещены внутри макросов, разделов на уровне страницы. Например, в приведенной ниже демонстрации форма представляет собой контейнер сетки, а его элементы размещены с использованием свойств CSS Grid.
Несмотря на то, что метки Email и Password имеют разную длину, поля формы идеально выстраиваются как по горизонтали, так и по вертикали. И в этом заключается магия Grid: он по умолчанию размещает
Двухмерный макет против одномерного
Как поясняет Рэйчел Эндрю в упомянутой выше ветке Твиттера:
Flexbox предназначен для одномерного макета. Строка ИЛИ столбец. Сетка предназначена для двухмерного макета. Строки И столбцы.
Макеты уровня страницы, а также внутренние компоненты могут нуждаться в сетке. Это важно в той мере, в какой указывает на фундаментальное эмпирическое правило, которое вступает в игру при принятии решения о том, какой из них и когда использовать. Если вашему дизайну требуется, чтобы элементы в сетке выстраивались в столбцы и строки, Grid не только идеально подходит для этой работы, но и является единственным инструментом, который делает это по умолчанию. С другой стороны, если вы хотите, чтобы элементы просто складывались так, чтобы каждая строка была независима от других с точки зрения длины и выравнивания, то Flexbox — ваш лучший друг, просто потому, что он делает это по умолчанию.
Как ясно дает понять Джен Симмонс в той же ветке Твиттера:
Сетка создает фактические столбцы и строки. Контент будет выстраиваться от одного к другому, как вы попросите. Флексбокс нет. Не только во втором измерении (о котором проще всего говорить), но и в первом измерении.
Когда вы сжимаете окно браузера, проверьте разницу между макетами на основе Flexbox и на основе сетки ниже:
Когда контейнер сжимается, элементы сетки остаются идеально выровненными, в то время как элементы Flexbox изменяют свои размеры и выравнивание по отношению друг к другу в зависимости от доступного пространства.
Однако это не означает, что вы не можете построить сетку с помощью Flexbox или что вы не можете сделать элементы сетки разной длины. Это означает, что вам придется написать некоторый дополнительный код, чтобы заставить Flexbox вести себя как сетка, и вам придется охватывать каждый из элементов сетки по отдельности, чтобы добиться гибкого макета, который вы видите выше. Тем не менее, это даст вам только внешний вид макета Flexbox, но, конечно, не его внутреннее поведение.
В заключение, если вы не хотите, чтобы строки выстраивались в линию, обязательно используйте Flexbox.
Но следует ли из этого, что Grid годится только для создания
Я не самый большой в мире поклонник 1D- и
Возможно, альтернативный способ сформулировать эмпирическое правило, которое могло бы быть полезным при выборе между Flexbox и Grid, состоял бы в том, чтобы сказать, что Flexbox работает с контентом наружу, а Grid работает с макетом в. Давайте посмотрим на эту идею немного ближе.
Контент вне или макет в
Спецификации W3C для Flexbox и Grid могут быть полезны для разъяснения выражений «из содержимого наружу» и «из макета внутрь».
Что касается Flexbox, в спецификации указано, что он предлагает:
простые и мощные инструменты для распределения пространства и выравнивания содержимого способами, которые часто требуются
Другими словами, Flexbox сообщает браузеру следующее: вот мой контент, просто придумайте лучший способ его распределения по горизонтали (или по вертикали, если это необходимо) наилучшим образом на основе заданного пространства.
В случае Grid спецификация Grid поясняет, что это —
предоставляет авторам механизм для разделения доступного пространства для макета на столбцы и строки с использованием набора предсказуемых вариантов изменения размера. Затем авторы могут точно расположить и изменить размер элементов стандартного блока своего приложения в областях сетки, определяемых пересечениями этих столбцов и строк.
В случае Grid отправной точкой является структура столбцов и строк, которую Grid создает явно или неявно. Код говорит браузеру: это мои блоки контента; теперь поместите их точно в структуру сетки в указанных местах.
Каким бы убедительным ни был этот подход к текущему обсуждению, я думаю, что он все же
Это позволяет браузеру, а не разработчику, определять, сколько столбцов и строк необходимо для контента в соответствии с доступным пространством, а также размещать конкретный фрагмент контента в столбце или строке один, два и т. д. немного похоже на Flexbox, но с идеальным выравниванием. (См. демонстрацию Grid со значками яблока в предыдущем разделе.)
Так что, хотя мне очень нравится этот третий вариант,
Какому практическому правилу я следую?
Grid может делать большинство вещей, которые может делать Flexbox, и многое другое, за исключением ограниченного числа вариантов использования. Следовательно, я склонен следовать позиции Криса Койера в его ветке Twitter, которая также похожа на подход Веса Боса по этому вопросу. Это выглядит следующим образом: если я не занимаюсь только теми немногими случаями, которые лучше обрабатываются Flexbox, я в основном выбираю Grid.
Примеры использования Flexbox
Как указывалось выше, одна вещь, которую Flexbox делает по своей природе, заключается в том, чтобы оборачивать элементы вдоль разных строк, каждый из которых заботится только о распределении своих элементов в доступном пространстве с учетом их различной ширины, без
Еще одна ситуация, в которой я бы подумал об использовании Flexbox вместо Grid, — это если мне нужна простая одномерная компоновка элементов, которые мне нужно будет легко переворачивать и/или анимировать.
Flexbox позволяет изменить порядок элементов всего одним правилом для
Кроме того, Flexbox позволяет легко анимировать размер своих дочерних элементов, чего также нельзя добиться в
Вот демонстрация того, как Flexbox справляется с обоими требованиями.
Последний случай использования, в котором я бы предпочел использовать Flexbox вместо Grid, — это если я хочу создать дизайн, в котором два или более элемента выровнены по горизонтали, причем только один из них растягивается на все доступное пространство, в то время как другие остаются. до их естественной ширины. Другими словами,
Панель поиска CodePen
Я думаю, что желаемая гибкость, требуемая этим компонентом, лучше обеспечивается с помощью Flexbox, хотя такой же дизайн можно легко реализовать с помощью Grid.
Вот живая демонстрация с использованием Flexbox, а вот с Grid.
Причина, по которой я считаю Flexbox лучшим вариантом, заключается в том, что если вы позже решите добавить больше элементов слева от растянутой панели поиска, вам не нужно будет возвращаться к документу CSS и
Панель поиска CodePen во Flexbox с дополнительными элементами, добавленными слева от панели поиска.
С другой стороны, хотя добавление дополнительных элементов справа от строки поиска будет выглядеть нормально в версии на основе сетки, добавление их слева испортит дизайн, а это означает, что вам также придется настроить CSS.
На изображении ниже показан редизайн панели поиска CodePen в Grid с дополнительными элементами, добавленными справа.
Редизайн панели поиска CodePen в Grid с добавлением дополнительных элементов справа
На следующем изображении показан редизайн панели поиска CodePen в Grid с дополнительными элементами, добавленными как слева, так и справа.
Редизайн панели поиска CodePen в Grid с добавлением дополнительных элементов слева и справа
В конце концов, это всего лишь крошечная корректировка, поэтому я оставляю этот вопрос на ваше усмотрение и ваши личные предпочтения относительно того, какой из них выбрать.
Сетка для всего остального
Для всего остального я бы выбрал Грида. Очевидно, я не сталкивался со всеми проектами, которые возможны в Интернете, но по большей части я не вижу ничего более мощного, чем Grid.
Есть задачи, которые Grid может выполнять не хуже Flexbox. Вот несколько примеров.
Центрирование элементов, которое было сделано с помощью Flexbox с момента его первой реализации в браузерах, можно так же быстро сделать с помощью Grid. Вот тот же дизайн, который показан в разделе выше на Flexbox, но на этот раз реализованный с использованием CSS Grid:
Вся магия заключена в этих трех строчках:
.hero {
display: grid;
/* centers vertically */
/* centers horizontally */
}
Еще один случай, который идеально подходит для Flexbox, но также выполним в Grid, — это выравнивание небольших элементов. В «Как выровнять вещи в CSS «Рэйчел Эндрю отмечает:
Я думаю, что одна из вещей, которую часто упускают из виду, — это то, насколько полезен Flexbox для выполнения небольших заданий по макету, когда вы можете подумать, что использование
Вот демонстрация Рэйчел, которая иллюстрирует ее точку зрения:
А вот мой форк, который повторяет тот же дизайн с помощью Grid:
Вместо использования
span {
display:
}
Вы даже можете добавить больше значков после текста, и он все равно выровняется, как и во Flexbox.
Кроме того, одна вещь, которую Flexbox не может сделать, но Grid делает очень хорошо, — это перекрытие элементов без проблем, возникающих при использовании абсолютного позиционирования. Взгляните на эту демонстрацию Джен Симмонс, чтобы увидеть, как это работает.
И я даже не упомянул, что будет в будущем с CSS Grid Level 2. Я не могу дождаться, когда подсетка будет широко реализована в браузерах. В этот момент выравнивание элементов, которые не являются прямыми дочерними элементами контейнера сетки без необходимости во вложенном контейнере сетки, будет таким же простым, как добавление значения subgridк
Наконец, есть даже спецификация CSS Grid Layout Module Level 3, которая может включать возможность построения макетов каменной кладки с использованием значения masonryдля
Заключение
В этой статье я обсудил несколько способов, которыми вы можете подойти к выбору между использованием Flexbox или Grid для своих макетов.
В эмпирических правилах, представленных выше, нет ничего предписывающего, и я думаю, что ни одно из них не является абсолютно лучшим, чем другие. Я бы даже сказал, что каждый из них дополняет другие и, следовательно, ни один из них не является исчерпывающим, если рассматривать его изолированно.
Последний подход, который я хотел бы предложить, заключается в следующем: создавайте множество макетов, используя обе технологии, пока не почувствуете, какой из них лучше всего подходит для вас.
