Flexbox layout container with shorthand props for direction, alignment, gap, and wrapping.

Import

import { Flex } from "@sigil-ui/components";

Preview

<Flex gap={8} align="center">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</Flex>

<Flex direction="column" gap={16}>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</Flex>

<Flex justify="between" wrap gap={12}>
  <div>Left</div>
  <div>Right</div>
</Flex>

Prop	Type	Default	Description
`direction`	`"row" \| "column" \| "row-reverse" \| "column-reverse"`	`"row"`	Flex direction
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	—	Align items
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	—	Justify content
`wrap`	`boolean \| "wrap" \| "nowrap" \| "wrap-reverse"`	—	Flex wrap behavior
`gap`	`number \| string`	—	Gap between items (number = px)
`inline`	`boolean`	`false`	Use `inline-flex` instead of `flex`
`className`	`string`	—	Additional CSS classes