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

justify

Default

alignItems

Default

alignContent

Default

direction

Default

<Flex>
    <div style={{ border: '1px solid black', padding: '30px', margin: '4px' }}>
      Flex Start
    </div>
    <div style={{ border: '1px solid black', padding: '20px', margin: '4px' }}>
      Flex Start
    </div>
    <div style={{ border: '1px solid black', padding: '10px', margin: '4px' }}>
      Flex Start
    </div>
  </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	Required	Description
alignContent	"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"	-	-	The CSS align-content property for the Flex component that orients horizontal location of columns
alignItems	"center" | "baseline" | "flex-start" | "flex-end" | "stretch"	-	-	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	React.ReactNode	-	-	The children of the Flex component
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
direction	"row" | "row-reverse" | "column" | "column-reverse"	-	-	The CSS flex-direction property for the Flex component
disableDefaultProviderProps	boolean	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.
justify	"center" | "end" | "start" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "left" | "right"	-	-	The CSS justify-content property for the Flex component that defines the alignment along the main axis

Flex Classes

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