import { Flexible } from '@uhg-abyss/web/ui/Flexible';

direction

align

justify

gap

wrap

() => {
  return (
    <Flexible>
      <Docs.ExampleBoxV2>Item 1</Docs.ExampleBoxV2>
      <Docs.ExampleBoxV2>Item 2</Docs.ExampleBoxV2>
      <Docs.ExampleBoxV2>Item 3</Docs.ExampleBoxV2>
    </Flexible>
  );
};

Direction

Use the direction prop to set the main axis. This corresponds to the CSS flex-direction value. The possible values are 'row', 'row-reverse', 'column', or 'column-reverse'. Defaults to 'row'.

Gap, align, and justify

gap sets the space between children on both axes (token or CSS length); rowGap overrides it for vertical spacing only. align maps to CSS align-items (cross axis) and justify to justify-content (main axis). All accept responsive objects.

Responsive props

direction, gap, align and justify each accept a responsive object keyed by breakpoint (xs, sm, md, lg). Each breakpoint applies at its min-width and above. The most common use of this is switching from a stacked column on small screens to a row on larger ones.

Wrap

Use the wrap prop to control whether children should wrap onto multiple lines when they overflow. This corresponds to the CSS flex-wrap value. The possible values are 'nowrap', 'wrap', or 'wrap-reverse'. Defaults to 'nowrap'.

Flexible Props

Name	Type	Default	Description
align	Responsive<"center" | "baseline" | "flex-start" | "flex-end" | "stretch"> | undefined		CSS align-items.
asElement	string | undefined	'div'	Determine what type of html element the Flexible will render
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined		The elements to arrange. Rendered as-is, with no wrapper elements.
className	string | undefined		CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-flexible-root", CSSProperties>> | undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
direction	Responsive<"row" | "column" | "row-reverse" | "column-reverse"> | undefined	'row'	CSS flex-direction.
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
gap	Responsive<Space> | undefined	'$web.semantic.spacing.scale.lg'	Spacing between items on both axes — a a token or a raw length
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
justify	Responsive<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"> | undefined		CSS justify-content.
rowGap	Responsive<Space> | undefined		Row gap — overrides gap for vertical spacing between wrapped rows.
slotProps	Partial<Record<"flexible-root", SlotPropsLeafValue>> | undefined
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.
wrap	Responsive<"wrap" | "nowrap" | "wrap-reverse"> | undefined	'nowrap'	CSS flex-wrap.

Flexible Classes

Class Name	Description
.abyss-flexible-root	Flexible root element