Layouts
Flexbox
Component for building flexible box layouts.
Component props
A Flexbox renders a Box as a child, so it also accepts all Box props.
| Name | Type |
|---|---|
| display | Responsive<"flex" | "inline-flex" | "none"> |
| direction | Responsive<"row" | "column" | "row-reverse" | "column-reverse"> |
| wrap | Responsive<"wrap" | "nowrap" | "wrap-reverse"> |
| justifyContent | Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch"> |
| justifyItems | Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | "left" | "right" | "baseline"> |
| alignContent | Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "baseline" | "space-between" | "space-around" | "space-evenly" | "stretch"> |
| alignItems | Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | "baseline"> |
| gap | Responsive<Spacing> |
| gapX | Responsive<Spacing> |
| gapY | Responsive<Spacing> |
| as | string |
| asChild | boolean |