Agriculture Design System
Design System for the Export Service


A CSS flexbox version of the Box component.

View in StorybookView in Github
import { ... } from '@ag.ds-next/react/flex';

The Flex component is a version of Box which applies display: flex.

Open in Playroom, opens in a new tab
<Flex>A simple Flex</Flex>

The ‘as’ prop

By default, the Flex component renders an HTML <div> element. You can render it with a different HTML element tag by using the as prop.

<Flex as="section">A simple Flex rendered as a section element</Flex>


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

<Flex inline>A simple inline Flex</Flex>


flexWrap is an optional prop that makes the children wrap if they can’t fit within the container.

<Flex flexWrap>A simple Flex with flex wrapping</Flex>

Box props

Flex supports all of the BoxProps from the box component (except for display), with the addition of inline. For more information, see Box props.

Responsive props

The Flex component supports the responsive prop syntax on most props. For more information about responsive props, see our documentation for Breakpoints.

  • Box A primitive layout component.
  • Stack Stack is a primitive layout component used to distribute items vertically with even spacing.