Composant · Structure

Flex

Stable

Primitive flexbox : direction, gap sur l'échelle d'espacement, alignement et justification. Base de Stack, Inline et Row.

Exemples

ABC

Voir le code (Svelte)

<Flex gap={2} justify="between" align="center">
  <Badge>A</Badge>
  <Badge>B</Badge>
  <Badge>C</Badge>
</Flex>

HautMilieuBas

Voir le code (Svelte)

<Flex direction="column" gap={2}>
  <Badge tone="info">Haut</Badge>
  <Badge tone="info">Milieu</Badge>
  <Badge tone="info">Bas</Badge>
</Flex>

Prop	Type	Default
`direction`	`"row" \| "column" \| "row-reverse" \| "column-reverse"`	`"row"`
`gap`	`number` (pas 0–12)	–
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	–
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	–
`wrap`	`boolean`	`false`
`inline`	`boolean`	`false`
`as`	`string`	`"div"`

Le gap est résolu en var(--st-spacing-N) avec repli rem.