Flex

A thin flexbox helper. Compared to Stack it exposes the full CSS flex-direction and justify-content vocabulary — use it when you need space-between rows, reversed order, etc.

Left


import { Flex } from '@gg-software/ui';
 
<Flex justify="space-between" align="center" gap="md">
    <Badge label="Left" variant="info" />
    <Button size="sm">Right action</Button>
</Flex>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	content rendered inside the component
`as`	`ElementType`	—
`direction`	`"inherit" \| "row" \| "-moz-initial" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "column" \| "column-reverse" \| "row-reverse"`	`row`
`align`	`AlignItems`	—
`justify`	`JustifyContent`	—
`gap`	`SpaceValue`	—
`wrap`	`boolean`	`false`
`inline`	`boolean`	`false`
`className`	`string`	—
`style`	`CSSProperties`	—

* required · generated from packages/ui/src/layout/Flex/Flex.tsx