FlexGrid — это утилита CSS, основанная на flexbox. Для получения дополнительной информации о Flex посетите Полное руководство по Flexbox. Базовая сетка определяется путем предоставления
контейнер сетка класс и дети цвет класс. Дети сетки будут иметь ту же ширину и масштаб в соответствии с шириной родителя.
<дел>
<дел>1
<дел>2
<дел>3
Сетка из 12 столбцов
FlexGrid включает утилиту компоновки на основе 12 столбцов, где ширина столбца определяется классом стиля col-{number} . Колонны с
предопределенная ширина также может использоваться со столбцами с автоматической шириной (col).
В первом примере ниже первый столбец охватывает 4 устройства из 12, а остальные столбцы занимают оставшееся пространство, тогда как
во втором примере все три столбца имеют явные единицы измерения.
Когда количество столбцов превышает 12, столбцы переносятся на новую строку.
<дел>
<дел>6
<дел>6
<дел>6
<дел>6
Столбец фиксированной ширины
Столбец может иметь фиксированную ширину, в то время как соседние элементы имеют автоматическую ширину. Примените класс col-fixed , чтобы зафиксировать ширину столбца.
<дел>
Исправлено
Авто
Смещение
Классы смещения позволяют определить левое поле для столбца, чтобы избежать добавления пустых столбцов для отступа.
<дел>
<дел>6
<дел>
<дел>4
<дел>4
Вложенные
Столбцы могут быть вложены друг в друга для создания более сложных макетов.
Отступ 0,5rem применяется к каждому столбцу вместе с отрицательными полями в элементе-контейнере. Если вы хотите удалить эти промежутки, примените .сетка-ногттер класс к контейнеру. Желоба также можно удалить в отдельных столбцах с тем же именем класса.
<дел>
<дел>1
<дел>2
<дел>3
Адаптивный
Точки останова определяют, как должно определяться свойство отображения в зависимости от размера экрана. Дизайн в первую очередь мобильный, поэтому меньшие значения
также может применяться к большим значениям, например. md также применяется к lg или xl, если они не определены явно.
sm : маленькие экраны напр. телефоны
md : средние сита, напр. таблетки
lg : большие экраны, например. блокноты
xl : большие экраны, например, мониторы
Изменить размер, чтобы изменить ширину блоков.
col-12 md:col-6 lg:col-3
col-12 md:col-6 lg:col-3
col-12 md:col-6 lg:col-3
col-12 md:col-6 lg:col-3
<дел>
А
Б
С
Д
Ряд сетки | Quasar Framework
Grid Row
Flex Grid
Введение в Flexbox
Flex Grid
Grid Column
Flex Grid
Grid Gutter
900 02 Flex Grid
Flex Playground
В надежде, что вы уже читали Введение в теорию Flexbox, давайте углубимся в Rows.
Использовать классы столбцов, зависящие от точки останова, для столбцов одинаковой ширины. Добавьте любое количество классов без единиц измерения для каждой необходимой точки останова, и каждый столбец будет иметь одинаковую ширину.
Одинаковая ширина
Например, вот два макета сетки, которые применяются к каждому устройству и области просмотра, от xs до xl.
Установка ширины одного столбца
Авто-макет для столбцов сетки flexbox также означает, что вы можете установить ширину одного столбца, а остальные будут автоматически изменять размер вокруг него. Вы можете использовать предопределенные классы сетки (как показано ниже) или встроенную ширину. Обратите внимание, что размер других столбцов будет изменяться независимо от ширины центрального столбца.
Содержимое переменной ширины
Используя классы col-{breakpoint}-auto , столбцы могут изменять свой размер в зависимости от естественной ширины их содержимого. Это очень удобно с однострочным содержимым, таким как ввод, числа и т. д. (см. последний пример на этой странице). Это, в сочетании с классами горизонтального выравнивания, очень полезно для центрирования макетов с неравными размерами столбцов при изменении ширины области просмотра.
Адаптивные классы
Сетка включает пять уровней предопределенных классов для создания сложных адаптивных макетов. Настройте размер столбцов на очень маленьких, малых, средних, больших или очень больших устройствах по своему усмотрению.
Все точки останова
Для одинаковых сеток от самых маленьких устройств до самых больших используйте классы .col и .col-* . Укажите нумерованный класс, когда вам нужен столбец определенного размера; в противном случае не стесняйтесь придерживаться .col.
С накоплением по горизонтали
Используя комбинацию классов .col-12 и .col-md-* , вы можете создать базовую сетку, которая начинается со стека на небольших устройствах, а затем становится горизонтальной на рабочем столе (средний) устройства.
Комбинируйте и сочетайте
Не хотите, чтобы ваши столбцы просто складывались в несколько уровней сетки? При необходимости используйте комбинацию разных классов для каждого уровня. Посмотрите пример ниже, чтобы лучше понять, как все это работает.
Выравнивание
Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.
TIP
Существует также удобный класс flex-center CSS, эквивалентный items-center + justify-center . Используйте его вместе с flex , row или column .
Перенос столбцов
Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов будет переноситься на новую строку как единое целое.
Изменение порядка
Смещение столбцов
Перемещение столбцов вправо с помощью классов .offset-md-* . Эти классы увеличивают левое поле столбца на * столбцов.
Для получения дополнительной информации о Flex посетите Полное руководство по Flexbox. Базовая сетка определяется путем предоставления
контейнер сетка класс и дети цвет класс. Дети сетки будут иметь ту же ширину и масштаб в соответствии с шириной родителя.
Если вы хотите удалить эти промежутки, примените .сетка-ногттер класс к контейнеру. Желоба также можно удалить в отдельных столбцах с тем же именем класса.
д. (см. последний пример на этой странице). Это, в сочетании с классами горизонтального выравнивания, очень полезно для центрирования макетов с неравными размерами столбцов при изменении ширины области просмотра.
