Flex

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

Import#

import { Flex } from "@chakra-ui/core";

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>