direction | 'horizontal'
'vertical' | 'horizontal' | Direction of sub components. Can be: horizontal or vertical. |
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' | 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. 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. |
innerRef | React.RefObject | undefined | Provide a React.Ref to accessing the inner HTML element. |
wrapChildrenInSpace | boolean | true | Define if intrinsic DOM child elements such as li should be wrapped in Space to receive spacing. Set to false to keep them as direct descendants. |
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. |