# Flex
A flexbox container with control over direction, justification, wrap, and spacing. Use Flex when **Row**, **Column**, and **Grid** can't get the layout you need — for example, when you want children to align in unusual ways or grow/shrink dynamically.
## Available in
* Page modules
* Order Form modules
* Catalog modules
* Public Page modules
Flex isn't available in Dashboard, Modal, Reports, or Navigation modules.
## When to use
* A row where one child should grow to fill remaining space and others stay fixed-size.
* Layouts that need to switch direction (row vs column) based on context.
* Justified groups (e.g. content centered or pushed to the end).
* Anywhere Row/Column don't give you the exact alignment you need.
For most simpler layouts, prefer **Row + Column** — they're easier to reason about. Reach for Flex only when you actually need its extra knobs.
## Settings
| Setting | Description |
| ------------------- | -------------------------------------------------------------------------------- |
| **Direction** | Row (horizontal) or Column (vertical). Default: Row. |
| **Justify Content** | How children distribute along the main axis: Start, Center, End. Default: Start. |
| **Gap** | Spacing in pixels between children. Default: 24. |
| **Wrap** | Whether children wrap when they overflow: Wrap or No-wrap. Default: Wrap. |
| **Printable** | Whether this Flex container appears in the print stylesheet. Default: No. |
## How it works
Flex applies CSS flexbox to its container with the configured direction, justification, gap, and wrap settings. Children sit inside, with their alignment driven by the container.
Flex disallows **Hero** and **Stats** as direct children (same as Grid) — those don't behave well inside flex containers.
{% hint style="info" %}
For most layouts, **Row** is simpler and reads better in the editor. Reach for Flex when you need centered justification, a column-direction container, or fine control over wrapping.
{% endhint %}
## Examples
**Centered call-to-action.** Flex with direction=Row, justify=Center. Drop a Heading + Action Button inside — they sit centered together.
**Vertical stack with even spacing.** Flex with direction=Column, gap=16. Children stack vertically with consistent spacing.
**Push-to-end layout.** Flex with direction=Row, justify=End. Useful for action button rows where you want the buttons aligned to the right.
## Related
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/layout-components/flex.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.