Importing
The component can be imported via:
Usage
The PlumaFlex component is a wrapper around Box for
making it easier to create flex containers.
Flex direction
The flex direction can be controlled with the direction prop:
Gap
The gap between items can be controlled with the gap prop, which accepts
space token values. rowGap and columnGap are also available for
more fine-grained control of the gaps.
Alignment
Main and cross axis alignment can be controlled with justifyContent and alignItems.
For example:
Wrap
The flex container can be set to wrap with the wrap prop. It accepts a boolean value,
or a wrap or nowrap string;
API
Default:start
How space is distributed along the flex container's cross axis. MDN Align Items
The space between columns. See space tokens / MDN Column Gap
Default:row
The direction of the flex container. MDN Flex Direction
Default:flex
The display property.
The space between rows and columns. See space tokens / MDN Gap
Default:start
How space is distributed along the flex container's main axis. MDN Justify Content
The space between rows. See space tokens / MDN Row Gap
Default:false
Whether flex items should wrap over multiple lines. MDN Flex Wrap