> 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         |