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";

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.

Box 1

Box 2

Box 3

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

Editable Example

Proudly made in 🇳🇬

Released under the MIT License.

Flex

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Import#