direction | 'horizontal'
'vertical' | 'horizontal' | Direction of sub components. Can be: horizontal or vertical. |
wrap | boolean | true | True to wrap contents if there is not enough space. |
justify | 'flex-start'
'flex-end'
'center'
'space-between'
'space-around'
'space-evenly' | 'flex-start' | How to place sub components if there is space available in the container. |
align | 'flex-start'
'flex-end'
'center'
'stretch'
'baseline' | 'flex-start' | How to align sub components. |
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. Defines either horizontal and vertical spacing depending on layout. Can also be false for no spacing. |
rowGap | 'xx-small'
'x-small'
'small'
'medium'
'large'
'x-large'
'xx-large'
false | 'small' | How much space between wrapped rows when direction is horizontal. Use false for no row gap. Has no effect when direction is vertical. |
element | string
React.Element | 'div' | Define the type of element. |
innerRef | React.Ref | undefined | Provide a React.Ref to accessing the inner HTML element. |
Space | Various | | Spacing properties like top or bottom are supported. |
spacing | 'xx-small'
'x-small'
'small'
'medium'
'large'
'x-large'
'xx-large'
false | 'small' | (deprecated) Deprecated, use gap instead. How much space between sub components. Can be false for no spacing. |