Flexbox и CSS Grid

Flexbox и CSS Grid — это два модуля компоновки CSS, которые стали популярными в последние годы. Оба позволяют нам создавать сложные макеты, которые раньше были возможны только с помощью CSS-хаков и/или JavaScript. Flexbox и CSS Grid имеют много общего, и многие макеты могут быть решены с помощью обоих. Однако, когда использовать это другой вопрос.

Споры о CSS Grid и flexbox в настоящее время являются самой горячей темой в сообществе CSS. Если вы следите за отраслевыми новостями, то в последнее время вы видели много замечательных статей, таких как:

• Рэйчел Эндрю писал об этом в блоге еще в 2016 году, а позже продолжила обсуждать его более подробно .
• В прошлом месяце Крис Койер начал вирусную ветку в Твиттере , которая закончилась более длинной статьей с несколькими крутыми примерами кода по CSS-трюкам.
• Мишель Баркер также ответила на ветку Криса в Твиттере, написав еще одну прекрасную статью Grid vs flexbox в своем популярном блоге CSS {In Real Life}.
• Сообщество MDN создало несколько подробных документов об основных различиях между Grid и flexbox , которые в настоящее время являются лучшей доступной документацией по этому вопросу.

Одно и два измерения

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

Flex-макет также может включать в себя несколько строк или столбцов, а flexbox рассматривает каждую строку или столбец как отдельный объект, основываясь на его содержимом и доступном пространстве.

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

Вот как W3C хочет, чтобы мы использовали flexbox и Grid, однако практика часто берет верх над теорией, и не все поклонники одномерного и двухмерного повествования.

На самом деле, мы можем создавать двухмерные макеты с помощью flexbox (из-за его возможности переноса) и одномерные макеты с помощью CSS Grid (из-за его возможности автоматического размещения).

Случаи применения

Наиболее распространенное заблуждение относительно двух модулей макета состоит в том, что Grid предназначен для полностраничных макетов, а flexbox — для небольших компонентов. Это совсем не так. Все упомянутые выше авторы предостерегают от такого подхода, так как он может серьезно ограничить возможности. Вам нужно оценивать каждый макет индивидуально в каждом конкретном случае, чтобы выбрать лучший вариант.

Приготовьтесь к битве!

Вопрос о flexbox и CSS Grid не имеет однозначного ответа и зависит от множества различных факторов. Не придерживайтесь того или другого, но всегда думайте, что лучше служит вашим целям. Вы также можете комбинировать flexbox и CSS Grid для решения сложных макетов.