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

Usage

Import

import { Flex, Spacer } from '@passfort/castle'
content_copy
Copy

Example

Using the Flex components, here are some helpful shorthand props:

• flexDirection is direction
• flexWrap is wrap
• flexBasis is basis
• flexGrow is grow
• flexShrink is shrink
• alignItems is align
• justifyContent is justify

<Flex color="white">
  <Item bg="N25" w="100px" />
  <Item w="40%" />
  <Item bg="N100" flex={1} />
</Flex>
<Flex color="white">
  <Item bg="N25" w="100px" />
  <Item w="40%" />
  <Item bg="N100" flex={1} />
</Flex>
content_copy
Copy
live example

Using the Spacer

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

<Flex>
  <Box w="20" h="10" bg="N25" />
  <Spacer />
  <Box w="40" h="10" bg="N50" />
  <Spacer />
  <Box w="60" h="10" bg="N100" />
</Flex>
<Flex>
  <Box w="20" h="10" bg="N25" />
  <Spacer />
  <Box w="40" h="10" bg="N50" />
  <Spacer />
  <Box w="60" h="10" bg="N100" />
</Flex>
content_copy
Copy
live example