Flex

Flex is Box with display: flex and comes with helpful style shorthand. It renders a div element by default.

Import


import { Flex } from '@stacks/ui';import { Flex } from '@stacks/ui';

Usage

Using the Flex components, here are some helpful shorthand props:

flexDirection is direction
flexWrap is wrap
alignItems is align
justifyContent is justify

While you can pass the verbose props, using the shorthand can save you some time.


<Flex align="center">
  <Flex bg="green.50" align="flex-end">
    <Text>Box 1</Text>
  </Flex>
  <Flex bg="blue.50" size="150px" align="center" justify="center">
    <Text textAlign="center" bg="pink.50">
      Box 2
    </Text>
  </Flex>
  <Box>
    <Text bg="tomato" color="white">
      Box 3
    </Text>
  </Box>
</Flex><Flex align="center">  <Flex bg="green.50" align="flex-end">    <Text>Box 1</Text>  </Flex>  <Flex bg="blue.50" size="150px" align="center" justify="center">    <Text textAlign="center" bg="pink.50">      Box 2    </Text>  </Flex>  <Box>    <Text bg="tomato" color="white">      Box 3    </Text>  </Box></Flex>

Search docs

⌘

On this page

Flex

Import

Usage