v0.1.2
layouts

Flex

Composable flexbox container with direction, alignment, gap and wrap control.

1
2
3

API Reference

FlexProps

Extends native HTML attributes inferred from the rendered element `as`.

PropertyTypeDefaultDescription
as
ElementTag
"div"HTML element to render as.
ref $bindable
HTMLElement
Reference to the rendered DOM element.
display
union
"flex"CSS `display` value.
direction
union
CSS `flex-direction` value.
justify
union
CSS `justify-content` value.
align
union
CSS `align-items` value.
alignContent
union
CSS `align-content` value. Only effective when `wrap` is active and items span multiple lines.
wrap
union
CSS `flex-wrap` value.
gap
union
Gap between items on both axes.
rowGap
union
Gap between rows.
colGap
union
Gap between columns.
children
Snippet
Content to render inside the flex container.

Examples

Stack

1
2
3
4
5

Cluster

1
2
3
4
5
6
7
8
9
10

Cluster with flex-basis

1
2
3
4
5