Flex
Flexible layout container with full control over direction, alignment, and wrapping.
Basic Row
Default horizontal layout with customizable gap.
A
B
C
Space Between
Items spread with space-between for header-style layouts.
Logo
DocsPro
Column Direction
Vertical stacking with column direction and flex-start alignment.
Step 1: Sign upStep 2: Verify emailStep 3: Start building
Wrap
Items wrap to the next line when they overflow the container.
Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6Tag 7Tag 8
Center Aligned
Items centered both horizontally and vertically.
All systems operational
End Aligned
Items pushed to the end of the container for action button groups.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
gap | string | "1rem" | Space between items |
align | string | "center" | Cross-axis alignment (align-items) |
justify | string | "flex-start" | Main-axis alignment (justify-content) |
direction | string | "row" | Flex direction: row, column, row-reverse, column-reverse |
wrap | string | "nowrap" | Flex wrap: nowrap, wrap, wrap-reverse |
children | content | - | Flex items |