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

Usage

Import

import { Flex } 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