Flex

Usage Guidance

Examples

Basic Example

Flex vs. Box

Flex is built with Box and has access to all BoxProps. The main differences between Box and Flex are:

• Flex is set to display: flex by default
• The display prop is limited to flex and inline-flex
• Flex has access to flex container style props.

In short, use Flex when you need a flex container to build one-directional layouts with CSS Flexbox, and use Box when you need a simple container. It’s also important to note that Flex has no real opinion about how to build layouts outside of the CSS Flexbox spec. This allows it to be composed into many different components.

Component API

Flex

Flex is the container component for creating one-dimensional layouts with CSS Flexbox. It has special style props that map to CSS Flexbox style properties to provide a common, ergonomic API for building layouts.

Props

Flex exposes flex container style props and Box style props.

Flex.Item

Flex.Item is a subcomponent of Flex. It is a Box component under the hood and exposes flex item style props that map to CSS Flexbox Item properties. This provides greater control over how child components render in your layout.

Props

Flex.Item exposes flex item style props and Box style props.