Skip to main content

Flex

Flex is a layout component that implements flexbox properties. It extends Box component functionality with focused flexbox capabilities.

Usage​

<Flex 
  flexDirection="row"
  justifyContent="space-between"
  alignItems="center"
  p="md"
>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</Flex>

Common Layout Pattern​

<Flex 
  flexDirection="column"
  gap="md"
  padding="lg"
>
  <Text>Header</Text>
  <Text>Content</Text>
  <Text>Footer</Text>
</Flex>

Props​

Flex accepts all styled-system props from the following categories:

  • Border Props
    • border, borderWidth, borderStyle
    • borderColor, borderRadius
  • Flexbox Props
    • alignItems, alignContent
    • justifyContent, flexWrap, flexDirection
    • flex, flexGrow, flexShrink, flexBasis
    • gap, rowGap, columnGap
  • Layout Props
    • width, height, minWidth, maxWidth
    • minHeight, maxHeight, size, display
  • Color Props
    • color, backgroundColor, bg
  • Background Props
    • background, backgroundImage
    • backgroundSize, backgroundPosition
  • Space Props
    • margin, padding and their variants