Flexbox утилиты

Quasar предоставляет мощный набор утилит для работы с Flexbox, позволяя создавать адаптивные и динамичные макеты без необходимости писать собственные CSS-классы. Эти утилиты охватывают направление, выравнивание, порядок, размеры и управление переносом элементов.

В Quasar все Flexbox-утилиты применяются через классы с префиксом q-, что обеспечивает единообразие и лёгкость использования.

Направление и порядок элементов

  • Направление Flex определяется классами:
Класс Описание
q-gutter-x / q-gutter-y Добавляет горизонтальные или вертикальные промежутки между элементами
row / column Основное направление: горизонтальное (row) или вертикальное (column)
row-reverse / column-reverse Обратное направление элементов

Пример использования:

<div class="row q-gutter-x-md">
  <div class="q-pa-md bg-primary text-white">Элемент 1</div>
  <div class="q-pa-md bg-secondary text-white">Элемент 2</div>
  <div class="q-pa-md bg-accent text-white">Элемент 3</div>
</div>
  • Порядок элементов можно управлять через классы order-1, order-2, …, order-last.
<div class="row">
  <div class="order-2">Второй</div>
  <div class="order-1">Первый</div>
</div>

Выравнивание элементов

Quasar позволяет управлять горизонтальным и вертикальным выравниванием с помощью утилит:

  • Главная ось (justify):
Класс Описание
justify-start Выравнивание по началу
justify-center Выравнивание по центру
justify-end Выравнивание по концу
justify-between Равномерное распределение с промежутками между элементами
justify-around Равномерное распределение с промежутками вокруг элементов
justify-evenly Равномерное распределение между всеми элементами
  • Поперечная ось (align):
Класс Описание
items-start Выравнивание к началу поперечной оси
items-center Центрирование
items-end Выравнивание к концу
items-stretch Растягивание на всю высоту контейнера
items-baseline Выравнивание по базовой линии текста

Пример:

<div class="row justify-between items-center q-pa-md">
  <div class="bg-primary text-white q-pa-sm">Левый</div>
  <div class="bg-secondary text-white q-pa-sm">Центр</div>
  <div class="bg-accent text-white q-pa-sm">Правый</div>
</div>

Перенос элементов

  • Класс flex-wrap позволяет элементам переноситься на следующую строку при нехватке места.
  • Для управления обратным переносом используется flex-wrap-reverse.
  • Отключение переноса реализуется через no-wrap.
<div class="row flex-wrap q-gutter-md">
  <div class="q-pa-md bg-primary text-white">1</div>
  <div class="q-pa-md bg-secondary text-white">2</div>
  <div class="q-pa-md bg-accent text-white">3</div>
  <div class="q-pa-md bg-positive text-white">4</div>
</div>

Управление размерами и гибкостью элементов

Quasar предоставляет классы для управления flex-grow, flex-shrink и flex-basis:

Класс Описание
flex-none Элемент не растет и не сжимается
flex-auto Элемент растет и сжимается автоматически
flex-1 Элемент занимает равную долю свободного пространства
flex-2, flex-3, … Элемент занимает пропорционально больше места

Пример:

<div class="row q-gutter-md">
  <div class="flex-1 q-pa-md bg-primary text-white">1/3</div>
  <div class="flex-2 q-pa-md bg-secondary text-white">2/3</div>
</div>

Отступы и заполнение пространства

Для точной настройки интервалов внутри и между элементами используются классы:

  • Отступы внутри (padding): q-pa-sm, q-pa-md, q-pa-lg
  • Отступы снаружи (margin): q-ma-sm, q-ma-md, q-ma-lg
  • Гибридные отступы по оси: q-mx-md (горизонтальный), q-my-md (вертикальный)

Комбинирование Flexbox-утилит

Классы можно свободно комбинировать, создавая сложные макеты без CSS:

<div class="column justify-center items-stretch flex-wrap q-gutter-md q-pa-lg">
  <div class="flex-1 bg-primary text-white q-pa-md">Элемент A</div>
  <div class="flex-2 bg-secondary text-white q-pa-md">Элемент B</div>
  <div class="flex-1 bg-accent text-white q-pa-md">Элемент C</div>
</div>

Здесь одновременно применяется вертикальное направление, центровка по главной оси, растяжение по поперечной оси и перенос элементов, что позволяет строить гибкие и адаптивные интерфейсы.

Адаптивные Flexbox-утилиты

Quasar поддерживает адаптивные классы для разных разрешений экрана:

Класс Эффект
row-xs, row-sm, row-md, row-lg, row-xl Определяет направление в зависимости от размера экрана
justify-center-md Центрирование элементов только на устройствах среднего размера
items-end-lg Выравнивание по концу на больших экранах

Пример:

<div class="row-xs column-md justify-center-md items-start-lg q-gutter-md">
  <div class="q-pa-md bg-primary text-white">A</div>
  <div class="q-pa-md bg-secondary text-white">B</div>
</div>

Итоговое преимущество

Использование Flexbox-утилит Quasar позволяет:

  • Создавать адаптивные макеты без написания кастомного CSS.
  • Быстро управлять направлением, выравниванием, порядком и размером элементов.
  • Комбинировать классы для сложных интерфейсных структур, сохраняя код чистым и понятным.

Flexbox в Quasar — это инструмент для гибкой, модульной и быстрой верстки, который идеально подходит для создания динамичных интерфейсов с минимальными усилиями.

Оглавление