import { ... } from '@ag.ds-next/react/flex';The Flex component is a version of Box which applies display: flex.
<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>
Inline
Use the inline prop to apply display: inline-flex to the element.
<Flex inline>A simple inline Flex</Flex>
Wrapping
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.