Flex

A CSS flex version of the Box component.

The <Flex /> component is a version of <Box /> that applies display: flex.

Inline

Use the inline prop to apply display: inline-flex to the element.

Wrapping

flexWrap is an optional prop that makes the children wrap if they can't fit within the container. This technique is useful when creating a "tag cloud" e.g.:

Other props

<Flex /> supports all of the BoxProps from the box component (except for display and unrelated grid-layout properties), with the addition of inline. See props for a full list.

Responsive

It also supports the responsive prop syntax on most props. Try resizing your viewport to see the effects: