Flex Layout
Flex layout
Start using via importing:
import { Flex } from "@perceptui/ui";<Flex>
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>API References
| Prop | Type | Description | Default |
|---|---|---|---|
| gap | number | Gap between flex elements | 4 |
| direction | "row" | "rowReverse" | "col" | "colReverse" | Flex Direction | "row" |
| wrap | "noWrap" | "wrap" | "wrapReverse" | Flex Wrap | "noWrap" |
| justify | "start" | "end" | "center" | "between" | "around" | "evenly" | Flex Justify Content | "start" |
| align | "start" | "end" | "center" | "baseline" | "stretch" | Flex Align Content | "start" |
Examples
Gap
<Flex gap={3}>
<div></div>
<div></div>
<div></div>
<div></div>
</Flex><Flex gap={2}>
<div></div>
<div></div>
<div></div>
<div></div>
</Flex><Flex gap={1}>
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>Direction
1
2
3
4
<Flex direction="row">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
4
<Flex direction="rowReverse">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
4
1
2
3
4
<Flex direction="col">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex><Flex direction="colReverse">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>Wrap
1
2
3
4
<Flex wrap="noWrap">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
4
<Flex wrap="wrapReverse">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
4
<Flex wrap="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>Align
1
2
3
<Flex align="start">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex align="end">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex align="center">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex align="stretch">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex align="baseline">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>Justify
1
2
3
<Flex justify="start">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex justify="end">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex justify="center">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex justify="between">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex justify="around">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>1
2
3
<Flex justify="evenly">
<div></div>
<div></div>
<div></div>
<div></div>
</Flex>