Flex

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

Panda

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

Usage

Used to manage flex layouts

import { DecorativeBox } from '@/app/components/decorative-box'
import { Flex } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <Flex gap="4" w="3/4">
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
      <DecorativeBox height="10" />
    </Flex>
  )
}

Direction

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

import { DecorativeBox } from '@/app/components/decorative-box'
import { Flex } from 'styled-system/jsx'

export function DirectionDemo() {
  return (
    <Flex direction="column" gap="4" w="3/4">
      <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 { DecorativeBox } from '@/app/components/decorative-box'
import { Flex } from 'styled-system/jsx'

export function AlignDemo() {
  return (
    <Flex align="center" gap="4" w="3/4">
      <DecorativeBox height="4" />
      <DecorativeBox height="8" />
      <DecorativeBox height="10" />
    </Flex>
  )
}

Justify

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

flex-start

center

flex-end

space-between

import { DecorativeBox } from '@/app/components/decorative-box'
import { Flex } from 'styled-system/jsx'

export function JustifyDemo() {
  return (
    <Flex direction="column" gap="lg" w="3/4">
      <Flex gap="4" justify="flex-start">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          flex-start
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="center">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          center
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="flex-end">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          flex-end
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>

      <Flex gap="4" justify="space-between">
        <DecorativeBox height="10" width="120px" />
        <DecorativeBox height="10" width="120px">
          space-between
        </DecorativeBox>
        <DecorativeBox height="10" width="120px" />
      </Flex>
    </Flex>
  )
}

Order

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

import { DecorativeBox } from '@/app/components/decorative-box'
import { Flex } from 'styled-system/jsx'

export function OrderDemo() {
  return (
    <Flex gap="4" w="3/4">
      <DecorativeBox height="10" order="1">
        1
      </DecorativeBox>
      <DecorativeBox height="10" order="3">
        2
      </DecorativeBox>
      <DecorativeBox height="10" order="2">
        3
      </DecorativeBox>
    </Flex>
  )
}

Auto Margin

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

import { DecorativeBox } from '@/app/components/decorative-box'
import { Flex } from 'styled-system/jsx'

export function MarginDemo() {
  return (
    <Flex gap="4" justify="space-between" w="3/4">
      <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 { DecorativeBox } from '@/app/components/decorative-box'
import { Flex } from 'styled-system/jsx'

export function WrapDemo() {
  return (
    <Flex gap="4" wrap="wrap" maxW="500px" w="full">
      <DecorativeBox height="10" width="200px" />
      <DecorativeBox height="10" width="200px" />
      <DecorativeBox height="10" width="200px" />
    </Flex>
  )
}

Props

The Flex component accepts any style properties along with the following props:

Prop	Type	Description
`align`	`SystemStyleObject['alignItems']`	The alignment of the children along the cross axis.
`direction`	`SystemStyleObject['flexDirection']`	The flex direction.
`justify`	`SystemStyleObject['justifyContent']`	The alignment of the children along the main axis.
`wrap`	`SystemStyleObject['flexWrap']`	The wrapping behavior of the children.
`basis`	`SystemStyleObject['flexBasis']`	The flex behavior of the children.
`grow`	`SystemStyleObject['flexGrow']`	The flex grow behavior of the children.
`shrink`	`SystemStyleObject['flexShrink']`	The flex shrink behavior of the children.

On this page

Edit this page on Github