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

Deprecated

Flex is deprecated and will be removed in a v3 of Abyss. It is in maintenance status and will only receive bug fixes if found. Please migrate to Flexible instead.

justify

Default

alignItems

Default

alignContent

Default

direction

Default

() => {
  return (
    <Flex>
      <Docs.ExampleBox padding="30px">Flex Start</Docs.ExampleBox>
      <Docs.ExampleBox padding="20px">Flex Start</Docs.ExampleBox>
      <Docs.ExampleBox padding="10px">Flex Start</Docs.ExampleBox>
    </Flex>
  );
};

Justify

Flexbox justify-content css property. Use the justify prop to define the alignment along the main axis. Types include: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'start', 'end', 'left', 'right'.

alignItems

Flexbox align-items css property. Use the alignItems prop to define the default behavior for how flex items are laid out along the cross axis on the current line. Types include: 'stretch', 'flex-start', 'flex-end', 'center', and 'baseline'.

alignContent

Use the alignContent prop to orient horizontal location of columns. Types include: 'stretch', 'flex-start', 'flex-end', 'center', and 'space-between', and 'space-around'.

Direction

Flexbox flex-direction css property. Use the direction prop to establish the main-axis, thus defining the direction flex items are placed in the flex container. Types include: 'row', 'row-reverse', 'column', 'column-reverse'.

Flex Props

Name	Type	Default	Description
alignContent	"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch" | undefined		The CSS align-content property for the Flex component that orients horizontal location of columns
alignItems	"center" | "baseline" | "flex-start" | "flex-end" | "stretch" | undefined		The CSS align-items property for the Flex component that defines the default behavior for how flex items are laid out along the cross axis on the current line
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined		The children of the Flex component
className	string | undefined		CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-flex-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	"row" | "column" | "row-reverse" | "column-reverse" | undefined		The CSS flex-direction property for the Flex component
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.
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
justify	"left" | "right" | "center" | "end" | "start" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined		The CSS justify-content property for the Flex component that defines the alignment along the main axis
slotProps	Partial<Record<"flex-root", SlotPropsLeafValue>> | undefined
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Flex Classes

Class Name	Description
.abyss-flex-root	Flex root element