---
metaTitle: Flow component | AwesCode UI
meta:
  - name: description
    content: The <AwFlow /> component is used to render Flow layout - UI Vue component for AwesCode UI.
title: Flow
---

# Flow

**Category:** Atom | **Import:** Global

The `AwFlow` component provides a flexible flow layout system with configurable gaps and alignment.

## Overview

`AwFlow` creates a flow-based layout (similar to flexbox) with consistent spacing between children. It supports horizontal and vertical layouts, alignment options, and customizable gaps.

## Usage

### Basic Example

```markup
<AwFlow>
    <AwButton>Item 1</AwButton>
    <AwButton>Item 2</AwButton>
    <AwButton>Item 3</AwButton>
</AwFlow>
```

### Vertical Layout

In vertical mode, items stack vertically. Use the `align` prop to control horizontal alignment.

```markup
<AwFlow vertical :gap="2">
    <AwButton>Item 1</AwButton>
    <AwButton>Item 2</AwButton>
    <AwButton>Item 3</AwButton>
</AwFlow>
```

### Vertical with Alignment

When the `vertical` prop is set, `align` controls horizontal alignment (items-center, items-end, items-start) and `justify` controls vertical distribution.

```markup
<AwFlow vertical align="center" justify="center" :gap="2">
    <AwButton>Centered Vertically</AwButton>
    <AwButton>and Horizontally</AwButton>
</AwFlow>
```

### Horizontal with Alignment

In horizontal mode (default), `align` controls vertical alignment and `justify` controls horizontal distribution. Note: horizontal mode has `align="center"` by default.

```markup
<AwFlow justify="center" :gap="6">
    <AwButton>Centered Item</AwButton>
</AwFlow>
```

### With Wrap

The `wrap` prop allows items to wrap to the next line when they exceed the container width.

```markup
<AwFlow wrap :gap="2">
    <AwButton>Item 1</AwButton>
    <AwButton>Item 2</AwButton>
    <AwButton>Item 3</AwButton>
    <AwButton>Item 4</AwButton>
    <AwButton>Item 5</AwButton>
    <AwButton>Item 6</AwButton>
</AwFlow>
```

### Inline Flow

Use the `inline` prop to render as inline-flex, allowing the flow to sit inline with surrounding content.

```markup
<AwDescription tag="div">
    This is text before
    <AwFlow inline :gap="2">
        <AwButton size="sm">Action 1</AwButton>
        <AwButton size="sm">Action 2</AwButton>
    </AwFlow>
    and text after.
</AwDescription>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| tag | HTML tag to render | `String` | `false` | `'span'` |
| gap | Gap scale (spacing multiplier, supports: 1, 2, 3, 4, 5, 6, 8) | `Number` | `false` | `4` |
| justify | Flexbox justify-content (start, center, between, end) | `String` | `false` | `''` |
| align | Flexbox align-items (start, center, end) | `String` | `false` | `'center'` (horizontal mode only) |
| vertical | Use vertical layout (flex-col) | `Boolean` | `false` | `false` |
| wrap | Allow items to wrap to next line (flex-wrap) | `Boolean` | `false` | `false` |
| inline | Use inline-flex instead of flex | `Boolean` | `false` | `false` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Flow children | - | - |

### Events

No events are emitted by this component.

## Related Components

- `AwGrid` - Grid layout component
- `AwCard` - Card component that may use flow layouts

## Notes

- **Import Method:** Global - Available as atom component
- Built on top of Tailwind's flexbox utilities
- **Gap values:** Accepts numbers 1-6 and 8, which map to Tailwind's gap classes (gap-1 through gap-8)
- **Default alignment behavior:**
  - Horizontal mode (default): Items have `align="center"` by default for vertical centering
  - Vertical mode: No default alignment, items align to start unless specified
- **Alignment and justify behavior:**
  - **Horizontal mode:** `align` controls vertical alignment (items-*), `justify` controls horizontal distribution (justify-*)
  - **Vertical mode:** `align` controls horizontal alignment (items-*), `justify` controls vertical distribution (justify-*)
- **Available alignment values:**
  - `align`: `start`, `center`, `end`
  - `justify`: `start`, `center`, `between`, `end`
- Use `wrap` prop to enable multi-line layouts when items exceed container width
- Use `inline` prop to render as inline-flex instead of block-level flex
- Component renders as a `<span>` by default (can be changed via `tag` prop)