Flex

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

Import#

import { CFlex } from "@chakra-ui/vue";

Usage#

When using the Flex component, you can use some of the following helpful shorthand props:

• direction for flexDirection
• wrap for flexWrap
• align for alignItems
• justify for justifyContent

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

<c-flex align="center">
  <c-flex bg="green.50" align="flex-end">
    <c-text>Box 1</c-text>
  </c-flex>
  <c-flex bg="blue.50" size="150px" align="center" justify="center">
    <c-text text-align="center" bg="orange.50">
      Box 2
    </c-text>
  </c-flex>
  <c-box>
    <c-text bg="tomato" color="white">
      Box 3
    </c-text>
  </c-box>
</c-flex>

Props#

CFlex composes the CBox component with these extra props. So all Box props apply here. See Box component for list of props