Глубокое понимание Flexbox и CSS Grid необходимо, если вы хотите создавать потрясающие адаптивные веб-сайты.
Если вы писали CSS какое-то время, скорее всего, вы хотя бы слышали об этих терминах. Возможно, вы даже использовали один или оба в какой-то степени. Обе они являются мощными частями CSS с похожими, но немного разными вариантами использования.
Что такое флексбокс?
Flexbox — это метод одномерной компоновки CSS, который существует уже некоторое время. Вы можете думать о Flexbox как о наборе связанных свойств CSS, которые вы можете использовать для выравнивания элементов HTML в контейнере и управления пространством между ними.
До Flexbox этот тип макета требовал утомительного и громоздкого использования float и свойства положения.
Если вы беспокоитесь о поддержке браузером Flexbox, не волнуйтесь. В соответствии с caniuse.com, все современные браузеры поддерживают Flexbox.
Основы Flexbox
Пока Flexbox включает множество свойств CSS., основы довольно просты. Использование Flexbox всегда начинается с объявления родительского контейнера flex-контейнером путем добавления
дисплей: гибкий своим правилам стиля. Это автоматически делает все дочерние элементы этого элемента гибкими.После этого вы можете управлять распределением пространства внутри flex-контейнера с помощью команды свойство justify-content. Вы можете управлять выравниванием flex-элементов с помощью выравнивание элементов свойство.
Вот пример кода, который использует Flexbox для равномерного распределения пространства в контейнере между его дочерними элементами и выравнивания их всех по центру контейнера. Это HTML:
<раздел класс ="контейнер">
<див>1</div>
<див>2</div>
<див>3</div>
<див>4</div>
<див>5</div>
</div>Это CSS:
.контейнер {
дисплей: гибкий;
ширина: 100%;
выравнивание содержимого: пространство вокруг;
выравнивание элементов: по центру;
граница: 1px сплошной черный;
высота: 200 пикселей;
}
.контейнер > дел {
высота: 100 пикселей;
ширина: 100 пикселей;
цвет фона: красный;
белый цвет;
размер шрифта: 5rem;
выравнивание текста: по центру;
радиус границы: 5px;
}
И вот результат:
Что такое CSS-сетка?
CSS Grid — это система компоновки, дополняющая Flexbox. Flexbox мощный, но не очень подходит для определенных типов макетов. Попытка отобразить структуру всей страницы с помощью Flexbox обернется утомительной задачей, связанной с уродливой, несематической разметкой и хакерским CSS.
CSS Grid — это не замена Flexbox, а скорее альтернативная система для некоторых ситуаций.
Поддержка CSS Grid не так обширна, как для Flexbox, но Grid достаточно хорошо поддерживается в 2022 году.
Основы CSS Grid
Концепция Grid проста. Как следует из названия, CSS Grid позволяет вам разделить пространство в родительском контейнере на сетку строк и столбцов с любым количеством строк/столбцов, которое вам нравится. После этого вы указываете положение дочерних элементов, ссылаясь на линии родительской сетки.
Начните с добавления дисплей: сетка в родительский контейнер. Затем используйте сетка-шаблон-строки и сетка-шаблон-столбцы свойства, чтобы указать строки и столбцы, на которые вы хотите разделить сетку. Затем вы можете использовать сетка-столбец и сетка-ряд свойства дочерних элементов, чтобы указать им, где в сетке они должны быть. Давайте рассмотрим пример Grid, в котором используется конфигурация из пяти элементов, описанная выше, но в более сложном расположении.
Вот HTML:
<раздел класс ="контейнер">
<див>1</div>
<раздел класс ="два">2</div>
<раздел класс ="три">3</div>
<раздел класс ="четыре">4</div>
<раздел класс ="пять">5</div>
</div>Вот CSS:
.контейнер {
отображение: сетка;
ширина: 100%;
строки-шаблона-сетки: повторить (3, 1fr);
сетка-шаблон-столбцы: повтор (3, 1fr);
зазор: 0.5рем;
граница: 1px сплошной черный;
высота: 300 пикселей;
}.контейнер > дел {
цвет фона: красный;
белый цвет;
размер шрифта: 5rem;
выравнивание текста: по центру;
радиус границы: 5px;
}
.контейнер &гт; .два {
сетка-ряд: 2;
сетка-столбец: 2;
}
Вот результат:
CSS Grid также включает в себя множество другие свойства, которые можно использовать для создания более сложных макетов..
Какой из них вы должны использовать?
Во-первых, важно отметить, что ничто не мешает вам использовать Flexbox и Grid вместе, и в некоторых случаях это оптимальный выбор. Тем не менее, давайте ответим на вопрос, какие макеты каждая из этих систем наиболее подходит для реализации.
Flexbox лучше всего подходит для создания макетов, которые включают выравнивание и распределение элементов на одной строке. Примерами такого макета являются выравнивание значков в конце раздела или расположение ссылок на панели навигации.
Сетка, с другой стороны, сияет ярче всего, когда вам нужно точно расположить элементы относительно других. (как по горизонтали, так и по вертикали), и вам нужно это позиционирование, чтобы легко адаптироваться к различным размерам экрана.
Чтобы продемонстрировать, вот код, который вам нужно написать, чтобы воссоздать макет из примера Grid с помощью Flexbox.
HTML:
<раздел класс ="контейнер">
<раздел класс ="под один">
<див>1</div>
<див>5</div>
</div><раздел класс ="под два">
<див>2</div>
</div>
<раздел класс ="под три">
<див>4</div>
<див>3</div>
</div>
</div>
CSS:
.контейнер {
граница: 1px сплошной черный;
высота: 300 пикселей;
}.sub {
дисплей: гибкий;
ширина: 100%;
}.один, .три {
выравнивание содержимого: пробел между
}.два {
выравнивание содержимого: по центру;
}
.sub > дел {
высота: 100 пикселей;
ширина: 100 пикселей;
цвет фона: красный;
белый цвет;
размер шрифта: 5rem;
выравнивание текста: по центру;
радиус границы: 5px;
}
И вот результат:
Здесь важно отметить, что хотя этот код выдает тот же результат, что и пример Grid, разметка здесь значительно сложнее. Для реализации этого макета требуются подконтейнеры, и вы должны размещать пронумерованные элементы div в разметке не по порядку.
Кроме того, предположим, что вам нужно переместить этот макет в неудобное положение: скажем, совместить 5-й элемент со вторым. Если бы вы использовали для этого Flexbox, вам пришлось бы прибегнуть к должность: родственник или что-то подобное. Используя сетку, все, что вам нужно, это сместить сетка-столбец свойство.
Но, напротив, реализация простого однострочного выравнивания из примера Flexbox с сеткой привела бы к гораздо большему количеству CSS. Очевидно, что сетка меньше подходит для такого макета.
Хотя Flexbox и Grid могут в основном копировать эффекты друг друга, есть некоторые исключения. Сделать элементы перекрывающимися довольно сложно только с Flexbox, но очень легко с Grid. Grid также не позволяет элементам отталкиваться от других элементов с помощью margin: auto, как это делает Flexbox.
Flexbox и Grid — мощные системы компоновки
Flexbox и CSS Grid — это системы дизайна, которые упрощают размещение содержимого вашей веб-страницы. Сетка лучше всего подходит для двумерных макетов с большим количеством элементов, которые необходимо точно расположить друг относительно друга. Flexbox лучше подходит для одномерных или однострочных макетов, где вам просто нужно разместить кучу элементов определенным образом.