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. |