Flex

Flex is Box with display: flex set. It renders a div element.

Import

import { Flex } from '@wpmedia/arc-ui-layout'

Usage

Box 1

Box 2

Box 3

<Flex alignItems="center"> <Flex bg="green.50" alignItems="flex-end"> <Text>Box 1</Text> </Flex> <Flex bg="blue.50" size="150px" alignItems="center" justifyContent="center"> <Text bg="red.50">Box 2</Text> </Flex> <Box> <Text bg="tomato" color="white"> Box 3 </Text> </Box> </Flex>

<Flex alignItems="center">
  <Flex bg="green.50" alignItems="flex-end">
    <Text>Box 1</Text>
  </Flex>
  <Flex bg="blue.50" size="150px" alignItems="center" justifyContent="center">
    <Text bg="red.50">Box 2</Text>
  </Flex>
  <Box>
    <Text bg="tomato" color="white">
      Box 3
    </Text>
  </Box>
</Flex>

Copy