Офсеты и выравнивание

Vuetify предоставляет мощные инструменты для управления расположением компонентов в сетке через систему flexbox и grid, а также собственные классы для отступов, маргинов и выравнивания. Понимание офсетов и выравнивания критично для построения адаптивных интерфейсов, где элементы должны быть расположены симметрично и логично на различных устройствах.

Сетка Vuetify и понятие офсета

В Vuetify используется 12-колоночная система сетки, аналогичная Bootstrap. Каждая строка (v-row) содержит колонки (v-col), ширина которых задается в долях от 12.

Офсет (offset) позволяет сдвинуть колонку вправо на заданное количество колонок, создавая пустое пространство слева.

Пример:

<v-row>
  <v-col cols="4" offset="2">
    Контент с офсетом
  </v-col>
</v-row>

В этом примере колонка занимает 4 колонки, а сдвиг слева составляет 2 колонки, что оставляет пустое пространство перед блоком.

Ключевые моменты офсета:

  • Офсет задается целым числом от 0 до 11.
  • Можно использовать адаптивные офсеты, указывая их для разных размеров экранов:
<v-col cols="6" offset-sm="1" offset-md="2" offset-lg="3">
  Адаптивный офсет
</v-col>
  • offset-sm применяется при ширине ≥600px, offset-md при ≥960px, offset-lg при ≥1264px.

Горизонтальное выравнивание компонентов

Vuetify позволяет управлять горизонтальным выравниванием с помощью классов justify-* и свойств align у v-row.

Классы justify

  • justify-start — выравнивание по левому краю
  • justify-center — по центру
  • justify-end — по правому краю
  • justify-space-between — равномерное распределение с промежутками
  • justify-space-around — равные промежутки вокруг колонок
  • justify-space-evenly — равные промежутки между и вокруг колонок

Пример:

<v-row justify="center">
  <v-col cols="3">Колонка 1</v-col>
  <v-col cols="3">Колонка 2</v-col>
</v-row>

В этом примере обе колонки будут горизонтально центрированы внутри строки.

Вертикальное выравнивание компонентов

Для управления вертикальным выравниванием используется свойство align у v-row и классы align-*:

  • align-start — по верхнему краю
  • align-center — по центру
  • align-end — по нижнему краю
  • align-baseline — по базовой линии текста
  • align-stretch — растянуть по высоте строки

Пример:

<v-row align="center" style="height: 200px;">
  <v-col cols="4">Центр по вертикали</v-col>
</v-row>

Высота строки фиксирована, а колонка выравнивается по вертикальному центру.

Комбинирование офсетов и выравнивания

Часто требуется сочетать офсеты с горизонтальным и вертикальным выравниванием для создания сложных макетов:

<v-row justify="end" align="center">
  <v-col cols="3" offset-md="2">
    Контент с офсетом и выравниванием
  </v-col>
</v-row>

Здесь колонка:

  • Сдвинута вправо на 2 колонки (offset-md)
  • Горизонтально выровнена к правому краю строки (justify-end)
  • Вертикально центрирована (align-center)

Адаптивные выравнивания

Vuetify позволяет менять выравнивание в зависимости от размера экрана, используя адаптивные свойства:

<v-row justify="center" justify-md="start">
  <v-col cols="6">Адаптивное выравнивание</v-col>
</v-row>
  • На маленьких экранах (xs, <960px) контент будет по центру.
  • На средних экранах (md, ≥960px) — по левому краю.

Внутренние и внешние отступы

Vuetify предоставляет классы для margins (m-*) и paddings (p-*), которые часто используются вместе с офсетами и выравниванием:

  • m-0…m-12 — внешние отступы от 0 до 12 единиц
  • mt-, mb-, ml-, mr- — отдельные отступы сверху, снизу, слева, справа
  • p-0…p-12 — внутренние отступы (padding)
  • Пример:
<v-col cols="4" offset="1" class="mt-4 mb-2">
  Контент с отступами
</v-col>

Практические советы

  1. Не используйте офсеты вместо выравнивания: офсеты лучше применять для точного позиционирования, а выравнивание — для центровки и распределения.
  2. Комбинируйте flex-классы: justify-* и align-* можно использовать вместе для достижения точного позиционирования.
  3. Адаптивность: всегда указывайте офсеты и выравнивание для разных размеров экранов, чтобы интерфейс оставался читаемым.
  4. Старайтесь минимизировать использование фиксированных высот: при вертикальном выравнивании flex-классы позволяют динамически центровать содержимое без жестких значений.

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

Оглавление