Bain Logo

Flex

Jump to Props

A primitive useful for flexible layouts.

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

Try it out! Change align="center" to "flex-end" and then the middle block's flex property to 2.

When to use Flex

Because many layout elements will be using Box, Flex allows you to be more descriptive with your JSX rather than just using Box everywhere. As a general rule of thumb, use Flex whenever you need the container to be display="flex".

As Flex is based on Box, you can then use all the standard style props that Box uses:

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
childrenReactNode

Content to show within the component

alignstring

Shorthand to set the standard CSS `alignItems` property.

justifystring

Shorthand to set the standard CSS `justifyContent` property.

wrapstring

Shorthand to set the standard CSS `flexWrap` property.

directionstring

Shorthand to set the standard CSS `flexDirection` property.`

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy