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


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


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.

Box 1

Box 2

Box 3

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


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

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!