Back to Components

Flex

Simple, all purpose flexing component to achieve common UI layouts and placements.

<Flex>

PropertyTypeDefaultEditor
alignChildren

Short cut child alignment property for both alignChildrenHorizontal and alignChildrenVertical.

OneOf

alignChildrenHorizontal

Horizontal alignment of children flex items.

OneOf

alignChildrenVertical

Vertical alignment of children flex items.

OneOf

alignSelf

Flex item alignment property (changes with parent direction).

OneOf

direction

Direction on which way to flex items.

OneOf

grow

Flex item property if it should grow with available space.

Boolean

gutter

Spacing applied between child flex items, values are global spacing variables.

OneOf

initial

Initial width to flex from for a child item.

OneOf

shrink

Flex item property if it should shrink.

Boolean

wrap

Flag to allow flex items to wrap over to new lines

Boolean