---
description: Компонент для позиционирования элементов, построенный на базе flex layout.
---

<Overview group="layout">

# Flex [tag:component]

Компонент для позиционирования элементов, построенный на базе [flex layout](https://developer.mozilla.org/ru/docs/Learn_web_development/Core/CSS_layout/Flexbox).

</Overview>

{/* @example-description: Базовый `Flex` с горизонтальным выравниванием элементов по центру и отступом между ними. */}
<Playground>
  ```jsx
  <Flex gap="m" justify="center">
    <Avatar size={48} initials="ДС" gradientColor="orange" />
    <Avatar size={48} initials="ИМ" gradientColor="yellow" />
    <Avatar size={48} initials="ВЖ" gradientColor="violet" />
    <Avatar size={48} initials="ЭМ" gradientColor="green" />
  </Flex>
  ```
</Playground>

## Направление главной оси

Свойство `direction` эквивалентно `CSS`-свойству `flex-direction` и контролирует расположение дочерних элементов.

- `"row"` — элементы располагаются в ряд слева направо (для `ltr` языков) или справа налево (для `rtl` языков) (по умолчанию);
- `"column"` — элементы располагаются в столбец.

### Инвертированное направление

Задаётся свойством `reverse`.

- `true` — применяется инвертированный порядок, эквивалентно `CSS`-свойствам `flex-direction: row-reverse` и `flex-direction: column-reverse`,
  в зависимости от указанного `direction`;
- `false` — инвертированный порядок не применяется (по умолчанию).

## Отступ между элементами

Задаётся свойством `gap`.

Принимает значение либо числовое (в пикселях), либо из списка предопределённых
дизайн-системой значений (`"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"`).

При передаче примитивного значения отступы между строками и столбцами будут одинаковы и равны переданному значению.
При передаче массива (`[row, column]`) есть возможность задать разные значения
для строк (первый элемент массива) и столбцов (второй элемент массива).

## Выравнивание контента

### Выравнивание по главной оси

Задаётся свойством `justify` и эквивалентно `CSS`-свойству `justify-content`.

- `"start"` — элементы располагаются в начале главной оси;
- `"end"` — элементы располагаются в конце главной оси;
- `"center"` — элементы располагаются по центру главной оси;
- `"space-around"` — элементы располагаются равномерно по главной оси, с отступом по бокам;
- `"space-between"` — элементы располагаются равномерно по главной оси, первый и последний элементы прижимаются к краям контейнера;
- `"space-evenly"` — элементы располагаются так, что расстояние между любыми двумя соседними элементами одинаково.

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

Задаётся свойством `align` и эквивалентно `CSS`-свойству `align-items`.

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

## Перенос строк

По умолчанию дочерние элементы компонента `Flex` переносятся на следующую строку при переполнении контейнера.

Свойство `noWrap` позволяет отключить перенос контента (позволяет выходить за пределы родителя).

- `true` — перенос отключен;
- `false` — перенос включен, эквивалентно `flex-wrap: nowrap` (по умолчанию).

## Отступы вокруг контейнера

Задаётся свойством `margin`.

- `"none"` — отступы отсутствуют (по умолчанию);
- `"auto"` — включены платформенные отступы.

Значение `margin="auto"` нужно для того, чтобы визуально выравнивать контент во `Flex` с остальными компонентами
VKUI (например, [`Header`](/components/group#header) и [`SimpleCell`](/components/simple-cell)).
Поэтому его использование обычно актуально только для верхнеуровневых компонентов `Flex`.

{/* @example-description: Использование `margin="auto"` для выравнивания контента `Flex` внутри `Group`. */}
<Playground>
  ```jsx
  <Group mode="card" header={<Header size="s">Друзья</Header>}>
    <Flex gap="m" justify="center" margin="auto">
      <Avatar size={48} initials="ДС" gradientColor="orange" />
      <Avatar size={48} initials="ИМ" gradientColor="yellow" />
      <Avatar size={48} initials="ВЖ" gradientColor="violet" />
      <Avatar size={48} initials="ЭМ" gradientColor="green" />
    </Flex>
  </Group>
  ```
</Playground>

## ~Flex.Item~ [tag:component]

> Подкомпонент устарел. Используйте [`Box`](/components/box), который теперь принимает все свойства `Flex.Item`.

Подкомпонент `Flex.Item` используется как обёртка для дочерних элементов компонента `Flex` в случае, когда нужно
переопределить `flex`-свойства этих элементов, например, `flex-basis`:

{/* @example-description: Сравнение устаревшего `Flex.Item` и современного подхода через `Flex`/`Box` c `flexBasis`. */}
<Playground>
  ```jsx
  <Flex gap="m" justify="center" margin="auto">
    <Card Component="div">Колонка</Card>
    <Flex.Item flexBasis={100}>
      <Card Component="div">Ширина 100px</Card>
    </Flex.Item>
    <Flex flexBasis={100}>
      <Card Component="div">Я лучше Ширина 100px</Card>
    </Flex>
    <Card Component="div">Колонка</Card>
  </Flex>
  ```
</Playground>

## Свойства компонентов раскладки

> Компонент `Flex` обладает общими свойствами, которые позволяют управлять отступами, размерами, позиционированием,
> переполнением и flex-свойствами.
> Подробнее про эти свойства можно почитать на соответствующей странице [`Box`](/components/box/#layout-props).

## Свойства и методы [#api]

### Flex

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "baseline" \| "end" \| "stretch"` | `-` | Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`. |
| `alignSelf` | `AlignSelfProp` | `-` | Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`. |
| `blockSize` | `SizeProp` | `-` | Размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента). |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `direction` | `"row" \| "column"` | `row` | Направление осей, эквивалентно `flex-direction`. |
| `display` | `"none" \| "flex" \| "inline-flex"` | `flex` | Возможность задать css-свойство `display`. |
| `flexBasis` | `FlexBasisProp` | `-` | Определяет начальный размер flex-элемента. |
| `flexGrow` | `FlexGrowProp` | `-` | Определяет, насколько элемент будет расти относительно остальных flex-элементов. |
| `flexShrink` | `FlexShrinkProp` | `-` | Определяет, насколько элемент будет сжиматься относительно остальных flex-элементов. |
| `gap` | `GapsProp` | `0` | Отступы между элементами. Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям. Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются. |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `inlineSize` | `SizeProp` | `-` | Размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента). |
| `inset` | `InsetProp` | `-` | Смещение элемента по `top`, `right`, `bottom` и `left` одновременно. |
| `insetBlock` | `InsetProp` | `-` | Боковое смещение по блочной оси (при горизонтальном направлении письма - свойства `top`/`bottom`). |
| `insetBlockEnd` | `InsetProp` | `-` | Смещение конечного отступа по блочной оси (при горизонтальном направлении письма - свойство `bottom`). |
| `insetBlockStart` | `InsetProp` | `-` | Смещение начального отступа по блочной оси (при горизонтальном направлении письма - свойство `top`). |
| `insetInline` | `InsetProp` | `-` | Боковое смещение по строчной оси (при горизонтальном направлении письма - свойства `left`/`right`). |
| `insetInlineEnd` | `InsetProp` | `-` | Смещение конечного отступа по строчной оси (при горизонтальном направлении письма - свойство `right`). |
| `insetInlineStart` | `InsetProp` | `-` | Смещение начального отступа по строчной оси (при горизонтальном направлении письма - свойство `left`). |
| `justify` | `FlexContentProps` | `-` | Выравнивание элементов по главной оси, эквивалентно `justify-content`. |
| `justifySelf` | `JustifySelfProp` | `-` | Для задания выравнивания, отличного от установленного на родителе, эквивалентно `justify-self`. |
| `margin` | `"none" \| "auto" \| MarginProp` | `none` | Внешние отступы контейнера. Дополнительно поддерживаются специальные значения: `none` — отключает дополнительные отступы; `auto` — включает платформенные отступы вокруг контейнера. |
| `marginBlock` | `MarginProp` | `-` | Внешние отступы по блочной оси. |
| `marginBlockEnd` | `MarginProp` | `-` | Внешний конечный отступ по блочной оси. |
| `marginBlockStart` | `MarginProp` | `-` | Внешний начальный отступ по блочной оси. |
| `marginInline` | `MarginProp` | `-` | Внешние отступы по строчной оси. |
| `marginInlineEnd` | `MarginProp` | `-` | Внешний конечный отступ по строчной оси. |
| `marginInlineStart` | `MarginProp` | `-` | Внешний начальный отступ по строчной оси. |
| `maxBlockSize` | `SizeProp` | `-` | Максимальный размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента). |
| `maxInlineSize` | `CSSGlobalValue \| ((string \| number) & Nothing) \| "max-content" \| "min-content" \| "fit-content"` | `-` | Максимальный размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента). |
| `minBlockSize` | `SizeProp` | `-` | Минимальный размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента). |
| `minInlineSize` | `CSSGlobalValue \| ((string \| number) & Nothing) \| "max-content" \| "min-content" \| "fit-content"` | `-` | Минимальный размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента). |
| `noWrap` | `boolean` | `false` | Отключает перенос контента, эквивалентно `flex-wrap=nowrap`. |
| `overflow` | `OverflowValue` | `-` | Управление переполнением содержимого. |
| `overflowBlock` | `OverflowValue` | `-` | Управление переполнением содержимого по блочной оси (при горизонтальном направлении письма - свойство `overflow-y`). |
| `overflowInline` | `OverflowValue` | `-` | Управление переполнением содержимого по строчной оси (при горизонтальном направлении письма - свойство `overflow-x`). |
| `padding` | `PaddingProp` | `-` | Внутренние отступы со всех сторон. |
| `paddingBlock` | `PaddingProp` | `-` | Внутренние отступы по блочной оси. |
| `paddingBlockEnd` | `PaddingProp` | `-` | Внутренний конечный отступ по блочной оси. |
| `paddingBlockStart` | `PaddingProp` | `-` | Внутренний начальный отступ по блочной оси. |
| `paddingInline` | `PaddingProp` | `-` | Внутренние отступы по строчной оси. |
| `paddingInlineEnd` | `PaddingProp` | `-` | Внутренний конечный отступ по строчной оси. |
| `paddingInlineStart` | `PaddingProp` | `-` | Внутренний начальный отступ по строчной оси. |
| `position` | `PositionValue` | `-` | Позиционирование элемента. |
| `reverse` | `boolean` | `false` | Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`. |

### Flex.Item

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `alignSelf` | `AlignSelfProp` | `-` | Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `flex` | `"content" \| "fixed" \| "grow" \| "shrink"` | `-` | Позволяет задать предопределенные значения свойства `flex`:  - `grow` соответствует значению `1 0 auto` - `shrink` соответствует значению `0 1 auto` - `content` соответствует значению `1 1 auto` - `fixed` соответствует значению `0 0 auto`. |
| `flexBasis` | `FlexBasisProp` | `-` | Определяет начальный размер flex-элемента. |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `justifySelf` | `JustifySelfProp` | `-` | Для задания выравнивания, отличного от установленного на родителе, эквивалентно `justify-self`. |