Flex

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

Создание Flex-контейнера

Для использования Flex нужно импортировать его из Chakra UI:

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

function Example() {
  return (
    <Flex>
      <Box w="100px" h="100px" bg="red.400" />
      <Box w="100px" h="100px" bg="green.400" />
      <Box w="100px" h="100px" bg="blue.400" />
    </Flex>
  );
}

По умолчанию Flex располагает элементы горизонтально (row) и выравнивает их по началу контейнера (flex-start).

Основные пропсы Flex

direction (flexDirection)

Определяет направление размещения элементов:

  • row — горизонтальное (по умолчанию)
  • row-reverse — горизонтальное в обратном порядке
  • column — вертикальное
  • column-reverse — вертикальное в обратном порядке
<Flex direction="column">
  <Box h="50px" bg="red.300" />
  <Box h="50px" bg="green.300" />
  <Box h="50px" bg="blue.300" />
</Flex>

align (alignItems)

Выравнивает элементы по поперечной оси:

  • flex-start — элементы прижаты к началу
  • center — по центру
  • flex-end — к концу
  • stretch — растягивает на всю высоту контейнера
  • baseline — выравнивание по текстовой линии
<Flex align="center" h="200px">
  <Box w="50px" h="50px" bg="red.300" />
  <Box w="50px" h="100px" bg="green.300" />
  <Box w="50px" h="70px" bg="blue.300" />
</Flex>

justify (justifyContent)

Выравнивает элементы по главной оси:

  • flex-start — прижаты к началу
  • center — по центру
  • flex-end — к концу
  • space-between — равномерный интервал, первый и последний у краёв
  • space-around — равные отступы вокруг элементов
  • space-evenly — равные интервалы между всеми элементами
<Flex justify="space-between">
  <Box w="50px" h="50px" bg="red.300" />
  <Box w="50px" h="50px" bg="green.300" />
  <Box w="50px" h="50px" bg="blue.300" />
</Flex>

wrap (flexWrap)

Позволяет элементам переноситься на новую строку, если они не помещаются:

  • nowrap — элементы в одну строку (по умолчанию)
  • wrap — перенос на новую строку
  • wrap-reverse — перенос в обратном порядке
<Flex wrap="wrap" w="200px">
  <Box w="100px" h="50px" bg="red.300" />
  <Box w="100px" h="50px" bg="green.300" />
  <Box w="100px" h="50px" bg="blue.300" />
</Flex>

gap — расстояние между элементами

Проп gap позволяет задать интервал между элементами Flex без использования маргинов.

<Flex gap="4">
  <Box w="50px" h="50px" bg="red.300" />
  <Box w="50px" h="50px" bg="green.300" />
  <Box w="50px" h="50px" bg="blue.300" />
</Flex>

Значение gap можно задавать в пикселях (gap="16px") или использовать масштаб Chakra (gap="4" = 1rem).

Flex-элементы и пропсы flex

Каждый дочерний элемент Flex может управлять своим поведением с помощью пропса flex:

  • flex="1" — элемент растягивается, заполняя доступное пространство
  • flex="0 1 auto" — по умолчанию
  • flexGrow, flexShrink, flexBasis — тонкая настройка поведения
<Flex>
  <Box flex="1" h="50px" bg="red.300" />
  <Box flex="2" h="50px" bg="green.300" />
  <Box flex="1" h="50px" bg="blue.300" />
</Flex>

В примере второй элемент занимает в два раза больше пространства, чем первый и третий.

Использование Flex для центрирования

Частый кейс — вертикальное и горизонтальное центрирование:

<Flex align="center" justify="center" h="200px" bg="gray.100">
  <Box w="100px" h="100px" bg="purple.300" />
</Flex>

Такой код создает идеально центрированный элемент как по горизонтали, так и по вертикали без лишних оберток.

Responsiveness с Flex

Chakra UI поддерживает адаптивные значения через массивы или объекты. Это позволяет менять свойства Flex в зависимости от ширины экрана.

<Flex
  direction={{ base: "column", md: "row" }}
  gap={{ base: 2, md: 4 }}
  align="center"
  justify="center"
>
  <Box w="50px" h="50px" bg="red.300" />
  <Box w="50px" h="50px" bg="green.300" />
  <Box w="50px" h="50px" bg="blue.300" />
</Flex>
  • На мобильных устройствах (base) элементы располагаются колонкой
  • На средних экранах (md) — рядом

Комбинация Flex с другими компонентами

Flex отлично сочетается с Box, Image, Text, Button и другими компонентами Chakra. Можно создавать навигационные панели, карточки, галереи и сложные макеты, полностью управляемые пропсами Flex без написания CSS.

<Flex p="4" bg="gray.50" align="center" justify="space-between">
  <Box>Logo</Box>
  <Flex gap="4">
    <Button colorScheme="teal">Home</Button>
    <Button colorScheme="teal">About</Button>
    <Button colorScheme="teal">Contact</Button>
  </Flex>
</Flex>

Этот подход позволяет создавать гибкие интерфейсы с минимальным кодом и высокой читаемостью.

Ключевые моменты

  • Flex — это расширяемый контейнер на основе Flexbox с удобными пропсами.
  • Основные пропсы: direction, align, justify, wrap, gap.
  • Элементы можно управлять через flex, flexGrow, flexShrink, flexBasis.
  • Адаптивность реализуется через объекты и массивы.
  • Flex упрощает выравнивание, центрирование и управление пространством без CSS.

Flex в Chakra UI — это фундамент для построения динамических, адаптивных и легко поддерживаемых интерфейсов.

Оглавление