Flexbox-свойства

Chakra UI предоставляет удобные и декларативные средства для работы с Flexbox через компонент <Flex> и набор утилитных пропсов. Компонент <Flex> является расширением обычного <Box> и поддерживает все свойства CSS Flexbox, что позволяет строить сложные макеты с минимальным количеством кода.

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

<Flex direction="row" align="center" justify="space-between">
  <Box w="100px" h="100px" bg="red.500" />
  <Box w="100px" h="100px" bg="green.500" />
  <Box w="100px" h="100px" bg="blue.500" />
</Flex>

В этом примере <Flex> задаёт направление элементов по горизонтали (direction="row"), выравнивание по центру по вертикали (align="center") и распределение пространства между элементами (justify="space-between").

Свойство direction

Свойство direction управляет направлением размещения дочерних элементов. Возможные значения:

  • row — горизонтальная линия (по умолчанию)
  • column — вертикальная колонка
  • row-reverse — горизонтальная линия в обратном порядке
  • column-reverse — вертикальная колонка в обратном порядке

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

<Flex direction="column" gap={4}>
  <Box bg="purple.400" w="50px" h="50px" />
  <Box bg="orange.400" w="50px" h="50px" />
  <Box bg="teal.400" w="50px" h="50px" />
</Flex>

Здесь gap={4} добавляет промежуток между элементами, что эквивалентно CSS gap.

Свойство align

Свойство align контролирует выравнивание элементов вдоль поперечной оси (перпендикулярно направлению flex). Основные значения:

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

Пример с растяжением элементов:

<Flex align="stretch" h="200px">
  <Box w="50px" bg="pink.300" />
  <Box w="50px" bg="cyan.300" />
  <Box w="50px" bg="yellow.300" />
</Flex>

Все элементы автоматически растягиваются по высоте контейнера.

Свойство justify

Свойство justify управляет распределением элементов вдоль главной оси (по направлению flex). Основные значения:

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

Пример с равномерным распределением:

<Flex justify="space-evenly">
  <Box w="60px" h="60px" bg="red.400" />
  <Box w="60px" h="60px" bg="green.400" />
  <Box w="60px" h="60px" bg="blue.400" />
</Flex>

Свойство wrap

Свойство wrap определяет, будут ли элементы переноситься на новые строки при нехватке места. Значения:

  • nowrap — элементы остаются в одной линии (по умолчанию)
  • wrap — элементы переносятся на новую строку
  • wrap-reverse — перенос с обратным порядком строк

Пример:

<Flex wrap="wrap" gap={3}>
  {Array.from({ length: 8 }, (_, i) => (
    <Box key={i} w="100px" h="100px" bg={`blue.${i * 100 + 200}`} />
  ))}
</Flex>

Элементы автоматически переходят на следующую строку, когда не помещаются в контейнере.

Свойство gap

Свойство gap задаёт промежуток между элементами flex. Оно работает как по горизонтали, так и по вертикали, если используется перенос строк:

<Flex direction="column" gap={6}>
  <Box w="80px" h="80px" bg="red.200" />
  <Box w="80px" h="80px" bg="green.200" />
  <Box w="80px" h="80px" bg="blue.200" />
</Flex>

gap является более предпочтительным способом создания отступов, чем использование margin, так как сохраняет семантическую чистоту макета.

Комбинирование свойств

Все Flexbox-пропсы можно комбинировать для построения сложных макетов:

<Flex
  direction={{ base: "column", md: "row" }}
  align="center"
  justify="space-between"
  wrap="wrap"
  gap={4}
>
  <Box w="120px" h="120px" bg="red.500" />
  <Box w="120px" h="120px" bg="green.500" />
  <Box w="120px" h="120px" bg="blue.500" />
  <Box w="120px" h="120px" bg="yellow.500" />
</Flex>

Здесь используется адаптивность через объектные пропсы: на мобильных устройствах (base) элементы располагаются вертикально, а на десктопе (md) — горизонтально.

Итоговые рекомендации по Chakra UI Flexbox

  • Использовать <Flex> для макетов вместо ручной работы с CSS Flexbox.
  • Применять gap для отступов между элементами.
  • Сочетать direction, align, justify и wrap для полного контроля над компоновкой.
  • Использовать адаптивные пропсы для гибких макетов на разных экранах.

Chakra UI делает Flexbox удобным и интуитивным, позволяя писать лаконичный и читаемый код без лишней верстки и CSS-файлов.

Оглавление