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

Direction

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

Align

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

Justify

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

Order

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

Auto Margin

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

Wrap

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

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

Cerberus Design System | Docs

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>
  )
}

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>
  )
}

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>
  )
}

1

2

3

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>
  )
}

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>
  )
}

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>
  )
}

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>
  )
}