Flexbox
A flexible layout component using CSS Flexbox for one-dimensional arrangements. Provides fine-grained control over alignment, distribution, and wrapping. For common cases, prefer the simpler Row and Column components.
There are convenience components Row and Column which render a Flexbox with the direction pre-selected. You should opt to use them
by default as they provide more semantic meaning and are easier to read.
Component props
A Flexbox renders a Box as a child, so it also accepts all Box props.
| Name | Type | Values |
|---|---|---|
| display | Responsive<FlexDisplay> | "flex" | "inline-flex" | "none" |
| direction | Responsive<FlexDirection> | "row" | "column" | "row-reverse" | "column-reverse" |
| wrap | Responsive<FlexWrap> | "wrap" | "nowrap" | "wrap-reverse" |
| justifyContent | Responsive<JustifyContent> | "center" | "start" | "end" | "space-between" | "space-around" | ... |
| justifyItems | Responsive<JustifyItems> | "center" | "start" | "end" | "stretch" | "baseline" | ... |
| alignContent | Responsive<AlignContent> | "center" | "start" | "end" | "space-between" | "stretch" | ... |
| alignItems | Responsive<AlignItems> | "center" | "start" | "end" | "stretch" | "baseline" | ... |
| gap | Responsive<Gap> | true | Spacing scale |
| gapX | Responsive<Gap> | true | Spacing scale |
| gapY | Responsive<Gap> | true | Spacing scale |
| as | string | HTML element to render |
| render | RenderProp | Render prop for polymorphism |