Flex
The Flex layout primitive is a thin abstraction over the CSS flexbox layout.
import { Flex } from '@balance-web/flex';The Flex layout primitive is a thin abstraction over the CSS flexbox layout.
Usage
Gap
The spacing between children can be adjusted using the gap prop.
Align items
The align prop maps to the align-items CSS property, and defines the
alignment of items along the cross-axis of the flex container.
Justify content
The justify prop maps to the justify-content CSS property, and defines the
distribution of space between items along the main-axis of the flex container.
Direction
Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
Inline
Display as an inline-level flex container.
<Flex inline={true} />Wrap
Allow flex items to flow onto multiple lines.
<Flex wrap={true} />Box Props
The Flex primitive implements Box so all props are inherited.