---
title: Flex
description: Used to manage flex layouts
links:
  source: components/flex
---

<ExampleTabs name="flex-basic" />

## Usage

```jsx
import { Flex } from "@chakra-ui/react"
```

```jsx
<Flex>
  <div />
  <div />
</Flex>
```

## Examples

### Direction

Use the `direction` or `flexDirection` prop to change the direction of the flex

<ExampleTabs name="flex-with-direction" />

### Align

Use the `align` or `alignItems` prop to align the children along the cross axis.

<ExampleTabs name="flex-with-align" />

### Justify

Use the `justify` or `justifyContent` prop to align the children along the main
axis.

<ExampleTabs name="flex-with-justify" />

### Order

Use the `order` prop to change the order of the children.

<ExampleTabs name="flex-with-order" />

### Auto Margin

Apply margin to a flex item to push it away from its siblings.

<ExampleTabs name="flex-with-auto-margin" />

### Wrap

Use the `wrap` or `flexWrap` prop to wrap the children when they overflow the
parent.

<ExampleTabs name="flex-with-wrap" />

## Props

<PropTable component="Flex" part="Flex" />
