Components

Flex

Use the Flex component to create flexbox layouts.

Selected Theme

Select brand or tribe name to preview style

Default

Usage

The Flex component is identical to the Box component, but with display: flex set. If you need to alter the display property, use the Box component instead.

import { Flex } from 'legion-ui';

Variant

Legion have only one variant of flex

Basic

Flex

Box

<Flex>
  <Box p={2} bg="primary500" color="white" sx={{ flexGrow: 1 }}>
    Flex
  </Box>
  <Box p={2} bg="success500" color="white">
    Box
  </Box>
</Flex>

Do you have feedback?

Please let us know to make it better

Send Feedback