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


  • Flex: a Box with display: flex
  • Spacer: creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex


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

Editable Example

Using the Spacer#

As an alternative to Stack, you can combine Flex and Spacer to create stackable and responsive layouts.

Box 1
Box 2
Editable Example
Edit this page

Made byChakraandRock Content