Flex

A flexbox container component with convenient props for direction, alignment, justification, wrapping, and gap. Simplifies common flexbox patterns.

Anatomy 

<script>
  import { Flex } from "@saas-ui/svelte/layout/flex";
</script>

<Flex direction="row" align="center" justify="between" gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Examples

Basic Accessibility

Basic flex container with items arranged in a row with configurable gap.

Direction Accessibility

Use the direction prop to change flex direction: row, column, row-reverse, or column-reverse.

Justify Accessibility

Use the justify prop to control content distribution: start, center, end, between, around, or evenly.

Props

Prop Type Default Description
direction row | column | row-reverse | column-reverse row The flex direction.
align start | center | end | stretch | baseline - Shorthand for alignItems.
justify start | center | end | between | around | evenly - Shorthand for justifyContent.
wrap wrap | nowrap | wrap-reverse - Shorthand for flexWrap.
gap number - The gap between children.
children any - The content to be rendered inside the component.
class text - Additional CSS classes to apply.