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

justify

Default

alignItems

Default

alignContent

Default

direction

Default

() => {
  return (
    <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	'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | undefined	-	-	The CSS align-content property for the Flex component that orients horizontal location of columns
alignItems	'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 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	React.ReactNode | undefined	-	-	The children of the Flex component
direction	'row' | 'row-reverse' | 'column' | 'column-reverse' | undefined	-	-	The CSS flex-direction property for the Flex component
justify	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'left' | 'right' | undefined	-	-	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