Flex

Try it out

<Flex ph={1} justifyContent="space-between">
  <Flex.Item as={Button} variant="standard">Cancel</Flex.Item>
  <Flex.Item as={Button} variant="action">Action</Flex.Item>
</Flex>

Best practices

Use the theme-based parameters when possible to avoid discrepencies between the design-system and the layout.

The flexDirection=reverse property should only be used for user experience purposes to affect the tab order. An example would be that the submit button is on the right and we want the user to tab there first instead of the Cancel button which is on the left.

Basic usage

The Flex component is an extension of the Box component which adds flex-based styling. It has all the props from Box, plus all flex container and flex item props. It also has a subcomponent, Flex.Item, with just the flex item props.

IE Compatibility

IE doesn’t have the greatest flex support. We have a couple built-in workarounds, but even then if you need IE support be careful and test thoroughly.

• justifyContent="space-evenly" is not supported, but is faked by adding empty ::before & ::after pseudo-elements and using space-between. Don’t try to combine this with an element that already has such pseudo-elements.
• gap (or rowGap & colGap) is not supported at all, but that’s worked around by setting the margins on all direct children to calc([gap] / 2).
  • This will override any margins set directly on the children, so be careful of that.
  • It also leaves some extra space around the edges of the container. The extra space can be “removed” by setting a negative margin on the Flex container, but this is not done automatically because it throws off width calculations and interferes with explicitly set margins, which are more common on containers than flex items.
  • To help with some custom fixes, there’s a boolean Flex.supportsGap property that can be checked.

Properties

All Box props, plus:

• alignItems
• alignContent
• justifyContent
• flexWrap
• flexDirection
• gap (or rowGap & colGap)
• all flex item props (see below)

Flex.Item

• flex
• flexShrink
• flexGrow
• flexBasis
• alignSelf
• order
• polymorphic as prop from styled-components