Flexbox
A simple flexbox component for arranging child elements in rows or columns with flexible alignment, spacing, and wrapping.
1
2
3
API Reference
FlexboxProps
Extends native HTML attributes inferred from the rendered element `as`.
| Property | Type | Default | Description |
|---|---|---|---|
as | ElementTag | "div" | HTML element to render as. |
ref $bindable | HTMLElement | Reference to the rendered DOM element. The element type is inferred from `as`. | |
display | union | "flex" | Flex display variant |
justify | union | "start" | Justify content |
direction | union | Flex direction | |
align | union | Align items | |
wrap | union | Flex wrap | |
gap | union | Flex gap | |
fullWidth | boolean | false | Flexbox full width |
fullHeight | boolean | false | Flexbox full height |
children | Snippet | Flexbox content to render |
Examples
Form
Card list
Title 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Title 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Title 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Wrap rows
1
2
3