> This page is for Flowkit CSS Framework, version v1.
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Flex Layout

> Flexbox layout utilities for directional flow, spacing, and alignment in the Webflow CSS Framework.

Flex layout utilities define how elements are laid out in one dimension (either horizontally or vertically).
Use direction, spacing, alignment, and child behavior modifiers to achieve flexible and consistent layouts.

---

## Flex Directions

Class Flex Horizontal and Flex Vertical define the element as a flex layout container in either row or column direction.

---

## Flex Spacing

Spacing between children is controlled with gap modifiers: Flex (Direction) Flex Gap (X)

| Label        | Combo Class Example          |
| ------------ | ---------------------------- |
| XX Small Gap | Flex Horizontal Flex Gap XXS |
| X Small Gap  | Flex Horizontal Flex Gap XS  |
| Small Gap    | Flex Horizontal Flex Gap SM  |
| Medium Gap   | Flex Horizontal Flex Gap MD  |
| Large Gap    | Flex Horizontal Flex Gap LG  |

---

## Flex Alignment

Use alignment combo-classes to control positioning of children inside a flex layout.
Alignment can be horizontal (`X`) or vertical (`Y`) depending on the direction of the parent container.

Common examples:

* Flex Horizontal X Center
* Flex Horizontal X Right
* Flex Horizontal Y Bottom
* Flex Vertical X Center
* Flex Vertical Y Bottom

**Align Horizontal Left**
Flex Horizontal X Left

Content

Content

**Align Horizontal Center**
Flex Horizontal X Center

Content

Content

**Align Horizontal Right**
Flex Horizontal X Right

Content

Content

**Align Space Between**
Flex Horizontal X Space Between

Content

Content

**Flex Wrap**
Flex Horizontal Flex Wrap

Content

Content

Content

**Align Vertical Top**
Flex Horizontal Y Top

Content

Content

**Align Vertical Center**
Flex Horizontal Y Center

Content

Content

**Align Vertical Bottom**
Flex Horizontal Y Bottom

Content

Content

**Align Horizontal Left**
Flex Vertical X Left

Content

Content

**Align Horizontal Center**
Flex Vertical X Center

Content

Content

**Align Horizontal Right**
Flex Vertical X Right

Content

Content

**Align Vertical Bottom**
Flex Vertical Y Bottom

Content

Content

**Align Vertical Center**
Flex Vertical Y Center

Content

Content

**Expand Horizontally**
Flex Vertical X Stretch

Content

Content

**Side by Side Vertically**
Flex Vertical Space Between

Content

Content

---

## Flex Child Modifiers

These combo-classes define how children inside a flex container behave:

| Behavior  | Combo Class          |
| --------- | -------------------- |
| No Shrink | Flex Child No Shrink |
| Expand    | Flex Child Expand    |
| Shrink    | Flex Child Shrink    |

Useful for allowing or preventing children from stretching, shrinking, or expanding based on available space.

Element with `Flex Child No Shrink` applied

Element with `[Utility] Width 100%` applied

Element with `Flex Child Expand` applied

Content

Element with `[Utility] Width 100%` applied

Element with `Flex Child Shrink` applied

---

## Responsive Modifiers

On Tablet resolution (991px and below), Flex Horizontal automatically changes to vertical layout by default.

To override this behavior, use responsive modifier combo classes, such as:

Tablet Flex Horizontal Mobile Landscape Flex Horizontal

These allow you to force direction across breakpoints.

### Tablet

| Description                          | Combo Classes                                        |
| ------------------------------------ | ---------------------------------------------------- |
| Horizontal direction                 | Flex Horizontal Tablet Flex Horizontal               |
| Vertical direction                   | Flex Horizontal Tablet Flex Vertical                 |
| Vertical direction, center content X | Flex Horizontal Tablet Flex Vertical Tablet X Center |
| Vertical direction, center content Y | Flex Horizontal Tablet Flex Vertical Tablet Y Center |

### Mobile Landscape

| Description          | Combo Classes                                    |
| -------------------- | ------------------------------------------------ |
| Horizontal direction | Flex Horizontal Mobile Landscape Flex Horizontal |
| Vertical direction   | Flex Horizontal Mobile Landscape Flex Vertical   |

### Mobile Portrait

| Description          | Combo Classes                                    |
| -------------------- | ------------------------------------------------ |
| Horizontal direction | Flex Horizontal Mobile Landscape Flex Horizontal |
| Vertical direction   | Mobile Landscape Flex Vertical                   |