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

direction

align

Default

justify

Default

gap

wrap

() => {
  const ExampleBox = useMemo(() => {
    return styled('div', {
      static: {
        padding: '$web.semantic.spacing.scale.lg',
        borderRadius: '$web.semantic.border-radius.container.large',
        backgroundColor: '$web.semantic.color.surface.container.primary',
        color: '$web.semantic.color.text.content.primary-alt',
      },
    });
  }, []);

  return (
    <Flexible>
      <ExampleBox>Item 1</ExampleBox>
      <ExampleBox>Item 2</ExampleBox>
      <ExampleBox>Item 3</ExampleBox>
    </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	Required	Description
align	Responsive< 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' > | undefined	-	-	CSS align-items.
asElement	string | undefined	'div'	-	Determine what type of html element the Flexible will render
children	React.ReactNode | undefined	-	-	The elements to arrange. Rendered as-is, with no wrapper elements.
direction	Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'> | undefined	'row'	-	CSS flex-direction.
gap	Responsive<Abyss.Space> | undefined	'$core.spacing.200'	-	Spacing between items on both axes — a a token or a raw length
justify	Responsive< | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' > | undefined	-	-	CSS justify-content.
rowGap	Responsive<Abyss.Space> | undefined	-	-	Row gap — overrides gap for vertical spacing between wrapped rows.
wrap	Responsive<'nowrap' | 'wrap' | 'wrap-reverse'> | undefined	'nowrap'	-	CSS flex-wrap.

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

Flexible.types.ts

Flexible Classes

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