Flex

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

Загружается...

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

Свойство 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 и SimpleCell). Поэтому его использование обычно актуально только для верхнеуровневых компонентов Flex.

Загружается...

Свойство	Описание
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"` Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`. По умолчанию: `-`
`alignSelf`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"` Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`blockSize`	`SizeProp` Размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента). По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`direction`	`"row" \| "column"` Направление осей, эквивалентно `flex-direction`. По умолчанию: `row`
`display`	`"none" \| "flex" \| "inline-flex"` Возможность задать css-свойство `display`. По умолчанию: `flex`
`flexBasis`	`FlexBasisProp` Определяет начальный размер flex-элемента. По умолчанию: `-`
`flexGrow`	`FlexGrowProp` Определяет, насколько элемент будет расти относительно остальных flex-элементов. По умолчанию: `-`
`flexShrink`	`FlexShrinkProp` Определяет, насколько элемент будет сжиматься относительно остальных flex-элементов. По умолчанию: `-`
`gap`	`GapsProp` Отступы между элементами. Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям. Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются. По умолчанию: `0`
`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`. По умолчанию: `-`
`margin`	`"auto" \| "none"` Значение `auto` позволяет задать платформенные отступы вокруг контейнера. По умолчанию: `none`
`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` Отключает перенос контента, эквивалентно `flex-wrap=nowrap`. По умолчанию: `false`
`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` Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`. По умолчанию: `false`

Flex.Item

Свойство	Описание
`alignSelf`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"` Для задания выравнивания, отлично от родительского, эквивалентно `align-self`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`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`	`string \| number` Изначальный размер элемента, эквивалентно `flex-basis`. По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`

FixedLayout

FormLayoutGroup

Flex

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

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

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

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

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

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

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

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

Flex.Item

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

Свойства и методы

Flex

Flex.Item