Введение во Flexbox | Quasar Framework
Introduction to Flexbox
Style & Identity
Spacing
Style & Identity
Visibility
Flex Grid
Grid Column
Flex Grid
Grid Gutter
Flex Grid
Flex Playground
Quasar предоставляет множество классов CSS, которые помогут вам легко создать свой пользовательский интерфейс с помощью Flexbox. Думайте об этом как о работе со строками и столбцами с множеством опций под рукой.
Модуль Flexbox (на котором основаны классы CSS Quasar Flex) предназначен для предоставления более эффективного способа компоновки, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен и/или динамичен (отсюда слово « флекс»).
СОВЕТ
На этой странице рассматриваются основы теории классов CSS Quasar Flex и подготавливаются к более подробным страницам, посвященным ряду сетки, столбцу сетки и желобу сетки.
Ключевая концепция
Классы CSS Quasar Flex применяются либо к контейнеру (родительскому), либо к элементам контейнера (дочерним).
Управляющий родительский элемент
Установка направления
Один из следующих классов CSS является обязательным для родительского элемента, чтобы классы для дочерних элементов (описанные в следующих разделах) имели какой-либо эффект.
| Class Name | Description |
|---|---|
row | Flex row |
row inline | Inline Flex row |
column | Flex column |
column inline | Inline Flex column |
row reverse | Flex row with flex-direction set to row-reverse |
column reverse | Flex column с flex-direction установлен на column-reverse |
Пример:
Первый столбецВторой столбец
Обтекание по умолчанию
По умолчанию все строки и столбцы переносят свое содержимое.
Однако, если вы явно не хотите переноса и при этом хотите уместить весь контент в одну строку, добавьте без переноса вспомогательный класс CSS.
Также, если вы хотите обернуть в обратном порядке, то доступен обратный перенос .
| Название класса | Описание |
|---|---|
обертка | Переносить при необходимости (по умолчанию включено, указывать не нужно) |
без переноса | НЕ выполнять перенос даже при необходимости |
0605 обратный перенос необходимо |
Выравнивание
Для выравнивания по главной оси используйте классы ниже. Это помогает распределять оставшееся свободное пространство, когда либо все гибкие элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Он также осуществляет некоторый контроль над выравниванием элементов, когда они выходят за пределы строки.
Для выравнивания перпендикулярно главной оси используйте классы ниже. Это определяет поведение по умолчанию для того, как flex-элементы располагаются вдоль поперечной оси на текущей строке. Думайте об этом как о версии Horizontal-* для поперечной оси (перпендикулярной главной оси).
TIP
Существует также удобный класс flex-center CSS, который эквивалентен items-center + justify-center . Используйте его вместе с flex , строка или столбец .
Следующие классы выравнивают строки гибкого контейнера внутри, когда на поперечной оси есть дополнительное пространство, аналогично тому, как horizontal-* выравнивает отдельные элементы внутри основной оси.
Управление дочерними элементами
Распределение размера
Quasar использует 12-точечную систему столбцов для распределения размера дочерних строк.
Вот несколько примеров доступных вспомогательных классов CSS:
<дел>две третиодна шестаяавтоматический размер в зависимости от содержимого и доступного местазаполняет оставшееся свободное пространство
В приведенном выше примере col-8 заполняет две трети (2/3) ширины строки, потому что 8/12 = 2/3 = 66%, а col-2 занимает одну шестую (2/12 = 1/6 ~ 16,67%).
Вспомогательный класс CSS col-auto заставляет ячейку заполнять только то пространство, которое необходимо для визуализации. col , с другой стороны, пытается заполнить все доступное пространство, а также сжимается при необходимости.
Вспомогательный класс CSS col-grow заставляет ячейку заполнять как минимум пространство, необходимое для визуализации, с возможностью увеличения, когда становится доступно больше места.
Вспомогательный класс CSS col-shrink заставляет ячейку заполнять максимально пространство, необходимое для визуализации, с возможностью сжатия, когда недостаточно места.
Другой пример с визуальным представлением под ним:
<дел> <дел>1 <дел>1 <дел>1
..
<дел>...
Во-первых, давайте узнаем о некоторых токенах, которые вы можете внедрить в середине вспомогательных классов 
В очень маленьких окнах нам нужно располагать дочерние элементы вертикально. В маленьких окнах нам нужно отображать их рядом (каждое из них имеет одинаковую ширину), и, начиная со средних окон, мы должны отображать их все в одной строке:
