> This page is for Flowkit CSS Framework, version v2 (default).
> 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` gap-`size`

Size options: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`

---

## 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 is-x-center
* flex_horizontal is-x-right
* flex_horizontal is-y-bottom
* flex_vertical is-x-center
* flex_vertical is-y-bottom

**Align Horizontal Left**
flex_horizontal is-x-left

Content

Content

**Align Horizontal Center**
flex_horizontal is-x-center

Content

Content

**Align Horizontal Right**
flex_horizontal is-x-right

Content

Content

**Align Space Between**
flex_horizontal is-x-space-between

Content

Content

**Flex Wrap**
flex_horizontal flex_wrap

Content

Content

Content

**Align Vertical Top**
flex_horizontal is-y-top

Content

Content

**Align Vertical Center**
flex_horizontal is-y-center

Content

Content

**Align Vertical Bottom**
flex_horizontal is-y-bottom

Content

Content

**Align Horizontal Left**
flex_vertical is-x-left

Content

Content

**Align Horizontal Center**
flex_vertical is-x-center

Content

Content

**Align Horizontal Right**
flex_vertical is-x-right

Content

Content

**Align Vertical Bottom**
flex_vertical is-y-bottom

Content

Content

**Align Vertical Center**
flex_vertical is-y-center

Content

Content

**Expand Horizontally**
flex_vertical is-x-stretch

Content

Content

**Side by Side Vertically**
flex_vertical is-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 width_100percent applied

Element with flex_child_expand applied

Content

Element with width_100percent applied

Element with flex_child_shrink applied

---

## Responsive Modifiers

Available responsive combo classes

| Combo Class       | Description                         |
| ----------------- | ----------------------------------- |
| tablet-x-center   | Center horizontally on tablet       |
| tablet-y-center   | Center vertically on tablet         |
| mobile-l-x-center | Center horizontally on mobile large |
| mobile-l-y-center | Center vertically on mobile large   |
| mobile-x-center   | Center horizontally on mobile       |
| mobile-y-center   | Center vertically on mobile         |