direction | "horizontal"
"vertical" | 'horizontal' | Direction of sub components. Can be: horizontal or vertical. |
layoutEngine | "css"
"legacy" | 'legacy' | Select the Flex layout engine. The legacy engine remains the default for backwards compatibility. Use css to opt in to native CSS gaps without changing existing layouts. |
wrap | boolean | true | Define if we should wrap contents if there is not enough space. |
justify | "flex-start"
"flex-end"
"center"
"space-between"
"space-around"
"space-evenly" | 'flex-start' | Distribute sub components along the main axis (CSS justify-content). In horizontal direction, this controls left-to-right placement. In vertical direction, this controls top-to-bottom placement. |
align | "flex-start"
"flex-end"
"center"
"stretch"
"baseline" | 'flex-start' | Align sub components along the cross axis (CSS align-items). In horizontal direction, this controls vertical alignment. In vertical direction, this controls horizontal alignment. |
divider | "space"
"line"
"line-framed" | 'space' | How to separate sub components. |
sizeCount | number | 12 | Define how many parts your layout should be divided in. Should be used in combination with a Flex.Item. |
gap | "xx-small"
"x-small"
"small"
"medium"
"large"
"x-large"
"xx-large"
false | 'small' | How much space between child items. Use false for no spacing. If in vertical layout: if both rowGap and gap is set, rowGap will be used. |
rowGap | "xx-small"
"x-small"
"small"
"medium"
"large"
"x-large"
"xx-large"
false | 'small' | How much space between rows. Use false for no row gap. If in vertical layout: if both rowGap and gap is set, rowGap will be used. |
element | string
React.Element | 'div' | Define the type of element. |
ref | React.RefObject | undefined | Provide a React.Ref to access the inner HTML element. |
wrapChildrenInSpace | boolean | true | Deprecated. Controls intrinsic-element wrapping only when layoutEngine="legacy" is used. |
Space | Various | | Spacing properties like top or bottom are supported. |