Spacer

Spacer — это компонент утилиты в библиотеке Chakra UI, предназначенный для управления пространством между элементами в Flex-контейнерах. Он автоматически занимает все доступное пространство в выбранном направлении, позволяя выравнивать компоненты без необходимости вручную задавать отступы через margin или padding.

Основная концепция

Компонент Spacer работает исключительно внутри Flex или HStack/VStack, так как его поведение основано на flex-grow. По умолчанию Spacer:

  • растягивается, чтобы занять всё доступное пространство в контейнере;
  • автоматически сдвигает соседние элементы, создавая необходимый интервал;
  • не требует явного указания размеров.

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

import { Flex, Box, Spacer } from "@chakra-ui/react";

function Example() {
  return (
    <Flex>
      <Box w="100px" h="50px" bg="tomato" />
      <Spacer />
      <Box w="100px" h="50px" bg="blue.500" />
    </Flex>
  );
}

В этом примере Spacer растягивает промежуток между двумя Box, занимая всё свободное пространство.

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

Spacer автоматически учитывает направление родительского контейнера:

  • В Flex с direction="row" или HStack — создаёт горизонтальное пространство.
  • В Flex с direction="column" или VStack — создаёт вертикальное пространство.

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

<Flex direction="column" h="200px">
  <Box h="50px" bg="green.400" />
  <Spacer />
  <Box h="50px" bg="purple.400" />
</Flex>

Здесь Spacer растягивает промежуток по вертикали, автоматически размещая верхний и нижний Box на максимальном расстоянии друг от друга.

Комбинация нескольких Spacer

Внутри одного Flex можно использовать несколько компонентов Spacer для создания пропорциональных интервалов. Каждый Spacer будет делить доступное пространство пропорционально своей flex-grow.

<Flex>
  <Box w="50px" h="50px" bg="red.400" />
  <Spacer />
  <Box w="50px" h="50px" bg="yellow.400" />
  <Spacer />
  <Box w="50px" h="50px" bg="blue.400" />
</Flex>

В этом случае оба Spacer растянуты равномерно, создавая одинаковые промежутки между блоками.

Настройка размера Spacer

По умолчанию Spacer занимает всё доступное пространство. Для точного управления можно использовать flex свойства родителя:

<Flex>
  <Box w="50px" h="50px" bg="red.400" />
  <Spacer flex="2" />
  <Box w="50px" h="50px" bg="blue.400" />
</Flex>
  • flex="2" — Spacer займёт в два раза больше пространства, чем стандартный Spacer с flex=1.
  • Можно комбинировать несколько Spacer с разными flex значениями для сложных макетов.

Использование Spacer в HStack и VStack

Компоненты HStack и VStack — это обёртки над Flex, упрощающие создание горизонтальных и вертикальных стеков. Spacer внутри них ведёт себя идентично:

import { HStack, Box, Spacer } from "@chakra-ui/react";

<HStack>
  <Box w="50px" h="50px" bg="pink.400" />
  <Spacer />
  <Box w="50px" h="50px" bg="cyan.400" />
</HStack>
  • HStack с Spacer создаёт горизонтальный отступ, равномерно распределяя элементы.
  • VStack с Spacer создаёт вертикальный отступ, обеспечивая одинаковое распределение по вертикали.

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

  1. Использовать только внутри Flex-контейнера. Spacer вне Flex не будет растягиваться.
  2. Не задавать ширину и высоту напрямую. Его сила именно в автоматическом распределении пространства.
  3. Комбинировать с flex. Для сложного макета можно использовать несколько Spacer с разными flex значениями.
  4. Использовать вместо margin/padding, если цель — создать динамически изменяемые интервалы между элементами.

Примеры сложных макетов

Макет с фиксированными и гибкими элементами:

<Flex h="100px" align="center">
  <Box w="80px" h="80px" bg="red.400" />
  <Spacer />
  <Box w="120px" h="80px" bg="blue.400" />
  <Spacer flex="2" />
  <Box w="60px" h="80px" bg="green.400" />
</Flex>
  • Первый Spacer занимает стандартное пространство.
  • Второй Spacer с flex=2 растягивается в два раза больше.
  • Позволяет легко управлять визуальной пропорцией без использования margin.

Комбинация Spacer с VStack для вертикального распределения:

<VStack h="300px">
  <Box h="50px" w="100px" bg="orange.400" />
  <Spacer />
  <Box h="50px" w="100px" bg="purple.400" />
  <Spacer />
  <Box h="50px" w="100px" bg="teal.400" />
</VStack>
  • Все Spacer делят вертикальное пространство поровну.
  • Легко создавать адаптивные вертикальные макеты.

Ключевые преимущества Spacer:

  • Автоматическое распределение пространства.
  • Простота в использовании внутри Flex.
  • Поддержка горизонтального и вертикального выравнивания.
  • Легкость комбинирования нескольких Spacer с пропорциональным делением пространства.
  • Замена ручного задания margin и padding для динамических макетов.
Оглавление