Basics

A Flex component is a layout container for content that exposes all props related to flexbox.
<Flex flexDirection="column">
  <Text variant="md">
    A Flex component is a layout container for content that exposes all props
    related to flexbox.
  </Text>
</Flex>

Flex Item Order

Flex items are displayed in the same order as they appear in the source document by default. We can use the order property to change the ordering.

Item 2
Item 1
<Flex>
  <Flex order="2">
    <Text variant="sm">Item 2</Text>
  </Flex>
  <Flex order="1">
    <Text variant="sm">Item 1</Text>
  </Flex>
</Flex>
On this page
Basics
Flex Item Order