Flexbox
Component | Source Code
extends ComponentPropsWithRef<“div”>
Props Inheritance Hierarchy: ComponentPropsWithRef<“div”>
A wrapper that allows for rapid and simple assembly of layouts by leveraging flex.
Intended to be used purely for layout. Flexboxes aren’t intended to have any styling associated with them besides the inline styles the component generates to express the flex options determined from the provided props.
Properties
Section titled “Properties”direction?: “row” | “column”
Section titled “direction?: “row” | “column””(Optional, defaults to row) The direction that the contents of the Flexbox
flow.
horizontalAlignment?: HorizontalAlignment
Section titled “horizontalAlignment?: HorizontalAlignment”reverseDirection?: boolean
Section titled “reverseDirection?: boolean”(Optional, defaults to false) Whether the flow direction of the Flexbox’s
contents should be reversed.
reverseWrap?: boolean
Section titled “reverseWrap?: boolean”spacing?: string
Section titled “spacing?: string”(Optional, defaults to 0.5rem) How much space to put between the contents of
the Flexbox.
verticalAlignment?: VerticalAlignment
Section titled “verticalAlignment?: VerticalAlignment”wrap?: boolean
Section titled “wrap?: boolean”(Optional, defaults to false) Whether the contents of the Flexbox should
wrap.