import { Flex } from "@vitality-ds/components";

The Flex component provides you with a CSS flexbox layout with handy props to adjust the layout. As a more advanced form of Stack, the Flex component provides you with more fine-granular control over the element's width, height, position etc.

<Flex width="100px">
  <FauxBadge>Element</FauxBadge>
  <FauxBadge>Element</FauxBadge>
</Flex>

The spacing prop provides control over the gap between the child elements inside a Flex component. You can pass any valid value in the Vitality space scale or 0 for a zero value.

<Flex spacing="xxl">
  <FauxBadge>Element</FauxBadge>
  <FauxBadge>Element</FauxBadge>
</Flex>

The direction prop provides control over the flex-direction of the child elements inside a Flex component. It accepts all valid values for the flex-direction property. The default is column.

<Flex direction="row">
  <FauxBadge>Element</FauxBadge>
  <FauxBadge>Element</FauxBadge>
</Flex>

The align prop provides controls the alignment of the child elements inside a Flex component items on the Cross Axis. It accepts values of start, center, end, stretch and baseline.

<Flex direction="row" spacing="sm" align="end">
  <FauxBadge>Element</FauxBadge>
  <FauxBadge>Element</FauxBadge>
</Flex>

The justify prop provides controls the alignment of the child elements inside a Flex component items on the Main Axis. It accepts values of start, center, end, between and stretch.

<Flex direction="row" width="100%" spacing="sm" justify="between">
  <Box width={200}>
    <FauxBadge>Element</FauxBadge>
  </Box>
  <Box width={200}>
    <FauxBadge>Element</FauxBadge>
  </Box>
</Flex>

The wrap prop provides controls whether child flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. It accepts values of wrap, noWrap and wrapReverse.

<Flex direction="row" spacing="xl" width="100%" wrap="wrap">
  <Box width="90%">
    <FauxBadge>Element</FauxBadge>
  </Box>
  <Box width={200}>
    <FauxBadge>Element</FauxBadge>
  </Box>
</Flex>

See Box docs.