Flexbox и CSS Grid
German
16 Марта 2022
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 для решения сложных макетов.
Есть общая проблема. Чтобы правильно выбрать, первое, необходимо четко понимать, что надо сделать и второе, знать хорошо flexbox и CSS Grid. Т.е. здорого ориентируясь в этом, зная это, мы можем выбирать. Только так. Так в любом деле. У нас есть выбор только в том, что мы знаем. А на изучение, усвоение необходимо время. При другом раскладе, мы может только полагаться на то, что говорят другие. А тут, аналогично необходимо понимать, что часто мнения (даже очень авторитетные) бывают субьективные, а порой и ошибочные.
Вот кто пишет про flexbox и CSS Grid, понятно, что он опирается и на свой опыт. Но насколько он полный? Какие задачи были и на основание чего он сделал свой вывод? А может быть для ваших задач вывод будет другой? Так во всём.