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

```tsx live
<Flex>I am a Flex</Flex>
```

## Inline

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

```tsx live
<Flex inline>I am an inline Flex</Flex>
```

## 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.:

```tsx live
<Box maxWidth="720px">
  <Flex flexDirection="row" gap="xsmall" flexWrap="wrap">
    <Box backgroundColor="neutralSubtle" width="90px" height="24px" />
    <Box backgroundColor="neutralSubtle" width="180px" height="24px" />
    <Box backgroundColor="neutralSubtle" width="50px" height="24px" />
    <Box backgroundColor="neutralSubtle" width="220px" height="24px" />
    <Box backgroundColor="neutralSubtle" width="65px" height="24px" />
    <Box backgroundColor="neutralSubtle" width="100px" height="24px" />
    <Box backgroundColor="neutralSubtle" width="150px" height="24px" />
    <Box backgroundColor="neutralSubtle" width="85px" height="24px" />
    <Box backgroundColor="neutralSubtle" width="75px" height="24px" />
  </Flex>
</Box>
```

## 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](/packages/flex/props) for a full list.

## Responsive

It also supports the [responsive prop syntax](/foundations/responsive-layouts#responsive-prop-syntax) on most props. Try resizing your viewport to see the effects:

```tsx live
<Flex height={100} gap={{ xsmall: 'xxsmall', medium: 'medium' }} justifyContent="center">
  <Text>Left</Text>
  <Text>Middle</Text>
  <Text>Right</Text>
</Flex>
```

Flex

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources