Import
import { FlexBox } from "@sugarcoat/ui-nxt";Usage
<FlexBox direction="row" gap={4} items="center">
<div>Item 1</div>
<div>Item 2</div>
</FlexBox>Basic Usage#
A simple flex container for arranging items.
Basic FlexBox
Direction#
Control the flex direction with row, column, row-reverse, or column-reverse.
Row (default)
Column
Row Reverse
Justify Content#
Control horizontal distribution with start, center, end, between, around, or evenly.
Justify Start
Justify Center
Justify End
Justify Between
Justify Around
Justify Evenly
Align Items#
Control vertical alignment with start, center, end, baseline, or stretch.
Items Start
Items Center
Items End
Gap#
Control spacing between items with gap values from 0 to 20.
Gap 1
Gap 4
Gap 8
Wrap#
Control how items wrap with wrap, no-wrap, or wrap-reverse.
Wrap
No Wrap
Common Patterns#
Centered Content#
Centered Content
Space Between Header#
Header Layout
Vertical Stack#
Form Stack
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | "row" | "column" | "row-reverse" | "column-reverse" | "row" | Flex direction |
| justify | "start" | "center" | "end" | "between" | "around" | "evenly" | "start" | Justify content alignment |
| items | "start" | "center" | "end" | "baseline" | "stretch" | "center" | Align items |
| flexContent | "start" | "center" | "end" | "between" | "around" | "stretch" | - | Align content (multi-line) |
| wrap | "wrap" | "no-wrap" | "wrap-reverse" | "no-wrap" | Flex wrap behavior |
| gap | 0-20 | - | Gap between items |
| as | ElementType | "div" | Element type to render as |
| render | ReactElement | Function | - | Custom render element or function |
| css | SystemStyleObject | - | Additional Panda CSS styles |