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

Element Plus предоставляет мощные инструменты для гибкого и точного выравнивания элементов на странице с использованием систем сеток, утилит для флексбокса и встроенных компонентов, таких как ElRow и ElCol. Эти механизмы позволяют создавать интерфейсы с адаптивной и аккуратной компоновкой, не прибегая к громоздким CSS-классам.

Использование ElRow и ElCol

Компоненты ElRow и ElCol реализуют систему сетки, где ElRow служит контейнером для строк, а ElCol — для колонок внутри строки. Ключевые свойства для выравнивания:

  • justify — задаёт горизонтальное выравнивание колонок внутри строки.
  • align — задаёт вертикальное выравнивание колонок внутри строки.
  • gutter — управляет промежутком между колонками.

Пример горизонтального выравнивания:

<el-row justify="center">
  <el-col :span="6">Колонка 1</el-col>
  <el-col :span="6">Колонка 2</el-col>
</el-row>
  • justify="start" — выравнивание слева.
  • justify="end" — выравнивание справа.
  • justify="center" — по центру.
  • justify="space-between" — равномерное распределение с промежутком между элементами.
  • justify="space-around" — равномерное распределение с одинаковым пространством вокруг элементов.

Пример вертикального выравнивания:

<el-row align="middle" style="height: 200px;">
  <el-col :span="8">Колонка 1</el-col>
  <el-col :span="8">Колонка 2</el-col>
</el-row>
  • align="top" — выравнивание по верхнему краю.
  • align="middle" — по центру строки.
  • align="bottom" — по нижнему краю.

Flex-утилиты для точного позиционирования

Element Plus использует Flexbox внутри компонентов ElRow, что позволяет применять свойства CSS напрямую для более сложного выравнивания:

  • flex-direction — направление элементов: row, column.
  • flex-wrap — перенос элементов на новую строку: nowrap, wrap.
  • align-items — выравнивание элементов по вертикали.
  • justify-content — выравнивание по горизонтали.

Пример вертикальной колонки с центрированием:

<el-row type="flex" justify="center" align="middle" style="height: 300px; flex-direction: column;">
  <el-col :span="12">Элемент 1</el-col>
  <el-col :span="12">Элемент 2</el-col>
</el-row>

Выравнивание внутри ElCol

Для вложенных элементов внутри колонки можно использовать стандартные CSS-классы и стили:

<el-col :span="8">
  <div style="display: flex; justify-content: flex-end; align-items: center; height: 100px;">
    Вложенный контент
  </div>
</el-col>

Ключевые методы выравнивания:

  • justify-content — определяет горизонтальное расположение вложенного контента.
  • align-items — вертикальное выравнивание.
  • align-self — выравнивание отдельного элемента внутри flex-контейнера.

Центрирование элементов

Часто требуется точное центрирование блока как по горизонтали, так и по вертикали. Для этого используют комбинацию ElRow с флексом:

<el-row type="flex" justify="center" align="middle" style="height: 400px;">
  <el-col :span="6">
    Центрированный блок
  </el-col>
</el-row>

Для абсолютного центрирования внутри ElCol:

<el-col :span="6" style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    Абсолютно центрированный
  </div>
</el-col>

Отступы и промежутки (gutter)

Свойство gutter в ElRow управляет промежутком между колонками, что позволяет аккуратно выравнивать элементы без ручного задания margin:

<el-row :gutter="20">
  <el-col :span="6">Колонка 1</el-col>
  <el-col :span="6">Колонка 2</el-col>
  <el-col :span="6">Колонка 3</el-col>
</el-row>
  • Значение gutter указывается в пикселях.
  • ElCol автоматически добавляет padding с двух сторон для равномерного распределения пространства.

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

Element Plus поддерживает адаптивную сетку, позволяя задавать разные выравнивания и ширину колонок для различных размеров экранов:

<el-row justify="center">
  <el-col :xs="24" :sm="12" :md="8" :lg="6">
    Адаптивная колонка
  </el-col>
</el-row>
  • xs — экраны < 576px
  • sm — экраны ≥ 576px
  • md — экраны ≥ 768px
  • lg — экраны ≥ 992px
  • xl — экраны ≥ 1200px
  • xxl — экраны ≥ 1600px

Таким образом, можно динамически менять размер, расположение и выравнивание колонок в зависимости от устройства пользователя.

Сочетание сетки и CSS-гибкости

Комбинирование встроенной сетки Element Plus и гибких CSS-свойств позволяет создавать сложные макеты без дублирования кода:

<el-row type="flex" justify="space-between" align="middle">
  <el-col :span="4">
    <div style="text-align: center;">Блок 1</div>
  </el-col>
  <el-col :span="4">
    <div style="display: flex; justify-content: flex-end;">Блок 2</div>
  </el-col>
</el-row>

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

Хотя Element Plus предоставляет базовые механизмы для выравнивания через ElRow и ElCol, сочетание их с CSS Flexbox и адаптивными свойствами позволяет реализовать практически любые макеты, от простых горизонтальных меню до сложных многоуровневых панелей.

Оглавление