Flexbox

A simple flexbox component for arranging child elements in rows or columns with flexible alignment, spacing, and wrapping.

View source

<script lang="ts">
    import { Flexbox, Panel } from 'svxui';
</script>

<Flexbox>
    <Panel variant="outline">1</Panel>
    <Panel variant="outline">2</Panel>
    <Panel variant="outline">3</Panel>
</Flexbox>

API Reference

Property	Type	Default	Description
`align`	`union`		Align items
`as`	`keyof SvelteHTMLElements`	`"div"`	Render element as
`children` Snippet	`Snippet<[void]>`		Flexbox content to render
`direction`	`union`		Flex direction
`display`	`union`	`"flex"`	Flex display variant
`elementRef` $bindable	`HTMLElement`		Rendered DOM element
`fullWidth`	`boolean`		Flexbox full width
`gap`	`union`		Flex gap
`justify`	`union`	`"start"`	Justify content
`wrap`	`union`		Flex wrap