Flex #

Flex is a parent reusable component for many other primitives, like Button, that allows to easily align the content. However, for layouts it is recommended to use Row or Column as they are faster to understand. Use Flex when you need to change content alignment dynamically.

Space #

Define gap between elements via space prop:

gap="none":

gap="xs":

gap="sm":

gap="md":

gap="lg":

gap="xl":

gap="2xl":

Alignment #

Since Flex can be used for rows and columns, use main and cross to align items inside Flex across main axis or cross axis.

main="start" (default)

main="center"

main="end"

main="space-between" – spacing between items is now controlled by the container size:

main="space-between" cross="center"

Flow #

You can reverse the components render using flow="column-reverse"

And row-reverse

Wrap #

Control content wrapping via wrap property: