Flex

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

Свойство 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.

Flex.Item

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

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