---
title: Flex
description: "`Flex` is a component that sets `flex` to `Box`. Also, convenient style shorthand is available."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/flex/flex.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/flex
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-flex--basic
---

# Flex

`Flex` is a component that sets `flex` to `Box`. Also, convenient style shorthand is available.

```tsx
<Flex gap="md">
  {Array.from({ length: 4 }).map((_, index) => (
    <Box key={index} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  ))}
</Flex>
```

## Usage

```tsx
import { Flex } from "@yamada-ui/react"
```

```tsx
import { Flex } from "@/components/ui"
```

```tsx
import { Flex } from "@workspaces/ui"
```

```tsx
<Flex />
```

### Direction

```tsx
<Flex direction="column" gap="md">
  {Array.from({ length: 4 }).map((_, index) => (
    <Box key={index} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  ))}
</Flex>
```

### Align

```tsx
<Flex align="center" gap="md">
  <For each={["sm", "md", "lg"]}>
    {(p, index) => (
      <Box key={index} bg="bg.contrast" color="fg.contrast" p={p}>
        Box
      </Box>
    )}
  </For>
</Flex>
```

### Justify

```tsx
<Flex justify="space-between" gap="md">
  {Array.from({ length: 4 }).map((_, index) => (
    <Box key={index} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  ))}
</Flex>
```

### Wrap

```tsx
<Flex wrap="wrap" gap="md" maxW="xs">
  {Array.from({ length: 4 }).map((_, index) => (
    <Box key={index} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  ))}
</Flex>
```

### Use spaces

```tsx
<Flex w="full" gap="md">
  <Box bg="bg.contrast" color="fg.contrast" p="md">
    Box
  </Box>

  <Spacer />

  <Box bg="bg.contrast" color="fg.contrast" p="md">
    Box
  </Box>
</Flex>
```

## Props

### Flex

| Prop          | Default | Type                                                                                                                                                 | Description                                |
| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                                                 | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                                            | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                                           | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                            | Set color scheme variables.                |
| `align`       | -       | `"-moz-initial" \| "anchor-center" \| "baseline" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "normal" ...`       | The CSS `align-items` property.            |
| `basis`       | -       | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-auto" \| "0.5" \| "1.5" \| "1" \| "1/12" \| "1/2" ...` | The CSS `flex-basis` property.             |
| `direction`   | -       | `"-moz-initial" \| "column-reverse" \| "column" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "row-reverse" \| "row" \| "unset" ...`    | The CSS `flex-direction` property.         |
| `grow`        | -       | `"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...`                                  | The CSS `flex-grow` property.              |
| `justify`     | -       | `"-moz-initial" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "left" \| "normal" \| "revert-layer" ...`            | The CSS `justify-content` property.        |
| `shrink`      | -       | `"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...`                                  | The CSS `flex-shrink` property.            |
| `wrap`        | -       | `"-moz-initial" \| "inherit" \| "initial" \| "nowrap" \| "revert-layer" \| "revert" \| "unset" \| "wrap-reverse" \| "wrap" \| AnyString ...`         | The CSS `flex-wrap` property.              |

### Spacer

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Similar Components

- [Bleed](https://yamada-ui.com/docs/components/bleed.md): `Bleed` is a component used to extend elements beyond the boundaries of a container.
- [Box](https://yamada-ui.com/docs/components/box.md): `Box` is the most abstract component on which all other components are built. By default, it renders a `div` element.
- [Center](https://yamada-ui.com/docs/components/center.md): `Center` is a component that aligns the child elements in the center within the component.
- [Container](https://yamada-ui.com/docs/components/container.md): `Container` is a component used as a general division element. By default, it renders the `section` element.
- [Float](https://yamada-ui.com/docs/components/float.md): `Float` is a component used to fix elements to the edges of a container.
- [Grid](https://yamada-ui.com/docs/components/grid.md): `Grid` is a component for managing grid layouts. It also comes with handy style shorthand.
- [Group](https://yamada-ui.com/docs/components/group.md): `Group` is a component that groups and attaches multiple elements together.
- [HStack](https://yamada-ui.com/docs/components/h-stack.md): `HStack` is used to stack child elements horizontally.

## Used By Components & Hooks

- [Group](https://yamada-ui.com/docs/components/group.md): `Group` is a component that groups and attaches multiple elements together.
- [Wrap](https://yamada-ui.com/docs/components/wrap.md): `Wrap` is a component that has `wrap` set on `Flex`. It inherits convenient style shorthand from `Flex`.