Layout-свойства

Chakra UI предоставляет мощный и гибкий набор инструментов для построения макета интерфейса с использованием свойств Layout. Эти свойства позволяют управлять размерами, позиционированием и пространством компонентов без необходимости написания отдельного CSS. В основе лежат Box и Flex компоненты, а также их производные.

Компонент Box как универсальный контейнер

Box — это базовый строительный блок, который можно использовать как обертку или самостоятельный элемент. Основные свойства layout для Box:

  • width (w) и height (h) — задают размеры элемента. Поддерживаются единицы px, %, em, rem и специальные значения full (100%) и auto.
  • maxWidth (maxW) и minWidth (minW) — ограничения по ширине.
  • maxHeight (maxH) и minHeight (minH) — ограничения по высоте.
  • display — задает тип отображения, например block, inline-block, flex, grid.
  • overflow — управляет переполнением содержимого: hidden, scroll, auto.

Пример:


  Содержимое Box

Flexbox в Chakra UI

Flex — это специализированный компонент, расширяющий Box, с заранее установленным display: flex. Flex позволяет управлять выравниванием и распределением пространства между элементами:

  • flexDirection (direction) — направление оси: row, column, row-reverse, column-reverse.
  • justifyContent (justify) — выравнивание по основной оси: flex-start, center, flex-end, space-between, space-around, space-evenly.
  • alignItems (align) — выравнивание по перекрестной оси: flex-start, center, flex-end, stretch, baseline.
  • flexWrap (wrap) — перенос элементов: nowrap, wrap, wrap-reverse.
  • gap — промежуток между элементами.

Пример:

Grid-свойства

Chakra UI поддерживает CSS Grid через компонент Grid. Основные свойства layout:

  • templateColumns и templateRows — задают сетку по колонкам и строкам: repeat(3, 1fr).
  • gap — промежуток между ячейками.
  • autoFlow — направление автоматического размещения: row, column, row dense.
  • alignItems и justifyItems — выравнивание содержимого ячеек.

Пример:

Margin и Padding

m, mt, mb, ml, mr, mx, my — задают внешние отступы. p, pt, pb, pl, pr, px, py — задают внутренние отступы.

Поддерживаются числовые значения (шкала Chakra UI, где 1 = 4px), а также единицы px, %, em, rem.

Пример:


  Отступы и паддинги

Позиционирование

  • position — тип позиционирования: static, relative, absolute, fixed, sticky.
  • top, bottom, left, right — смещения элемента при позиционировании.
  • zIndex — порядок наложения элементов.

Пример:

Ширина и высота в процентах и fit-content

Chakra UI поддерживает адаптивные размеры:

  • w="full" или h="full" — 100% от родителя.
  • w="fit-content" — под размер содержимого.
  • minW, maxW, minH, maxH — ограничения размеров.

Пример адаптивного блока:


  Адаптивный Box

Overflow и Scroll

  • overflow — определяет поведение при переполнении.
  • overflowX и overflowY — управление по осям.

  Длинный текст, который превышает размеры Box и вызывает прокрутку.

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

Свойства можно комбинировать для построения сложных интерфейсов. Пример использования Flex и Box для панели инструментов:


  Лого
  
    Кнопка1
    Кнопка2

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

Оглавление