Get Started
Components
Styling
Theming

Flex

Used to manage flex layouts as an alternative to HStack and VStack.

import { Flex, Box } from "styled-system/jsx";


const Demo = () => {
  return (
    <Flex>
      <Box bgColor="page.surface.100" h="3rem" />
      <Box bgColor="page.surface.100" h="3rem" />
      <Box bgColor="page.surface.100" h="3rem" />
    </Flex>
  );
};

Usage

import { Flex } from "styled-system/jsx";
<Flex>
  <div />
  <div />
</Flex>

Examples

Direction

Use the direction or flexDirection prop to change the direction of the flex

import { Flex } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <Flex gap="4" direction="column">
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
    </Flex>
  )
}

Align

Use the align or alignItems prop to align the children along the cross axis.

import { Flex } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <Flex gap="4" align="center">
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
    </Flex>
  )
}

Justify

Use the justify or justifyContent prop to align the children along the main axis.

import { Flex } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <Flex gap="4" justify="space-between">
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
    </Flex>
  )
}

Order

Use the order prop to change the order of the children.

import { Flex } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <Flex gap="4">
      <DecorativeBox height="10" order={2} />
      <DecorativeBox height="10" order={1} />
      <DecorativeBox height="10" order={3} />
    </Flex>
  )
}

Auto Margin

Apply margin to a flex item to push it away from its siblings.

import { Flex } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <Flex gap="4" justify="space-between">
      <DecorativeBox height="10" width="40" />
      <DecorativeBox height="10" width="40" marginEnd="auto" />
      <DecorativeBox height="10" width="40" />
    </Flex>
  )
}

Wrap

Use the wrap or flexWrap prop to wrap the children when they overflow the parent.

import { Flex } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  return (
    <Flex gap="4" wrap="wrap" maxW="500px">
      <DecorativeBox height="10" width="200px" />
      <DecorativeBox height="10" width="200px" />
      <DecorativeBox height="10" width="200px" />
    </Flex>
  )
}

Props

The Flex component accepts any CSS properties and the following props:

PropTypeDescription
alignSystemStyleObject['alignItems']The alignment of the children along the cross axis.
directionSystemStyleObject['flexDirection']The flex direction.
justifySystemStyleObject['justifyContent']The alignment of the children along the main axis.
wrapSystemStyleObject['flexWrap']The wrapping behavior of the children.
basisSystemStyleObject['flexBasis']The flex behavior of the children.
growSystemStyleObject['flexGrow']The flex grow behavior of the children.
shrinkSystemStyleObject['flexShrink']The flex shrink behavior of the children.
inlinebooleanIf true, the flex container will be displayed as inline-flex.

On this page