On this page

Placing elements pixel by pixel works — until you need to add one more item and everything shifts. Flex layout handles arrangement automatically: set a direction and spacing, and your elements organize themselves. Add or remove items and the layout adapts.

## Creating a flex layout

There are two ways to enable flex:

- **On an existing frame**: Select a single frame and click the **+** button in the Flex layout section of the Properties panel (or press **Shift+A**). The frame becomes a flex container and its children rearrange immediately.
- **Wrap in a new flex frame**: Select multiple objects (or a non-frame element) and press **Shift+A**. A new flex frame is created around your selection.

To disable flex, click the **-** button in the Flex layout header.

Flex layouts can't be added inside component sets.

## Direction

Choose how children flow inside the container:

- **Row** — Children arranged horizontally, left to right.
- **Column** — Children arranged vertically, top to bottom.

## Spacing

### Distribution mode

- **Packed** — Children sit together, separated by the gap value.
- **Space between** — Children spread evenly with space distributed between them.

### Gap

- **Spacing between children** — The main-axis gap between items.
- **Spacing between rows** — The cross-axis gap between wrapped rows. Only visible when wrap is enabled.

### Padding

Set inner spacing around all items using Left, Right, Top, and Bottom padding values. Use the **lock** toggle to keep all four values equal.

## Frame sizing

The flex container itself can size in two ways on each axis:

| Mode     | Behavior                                     |
|----------|----------------------------------------------|
| **Fixed**       | The frame keeps its set size.                  |
| **Hug content** | The frame shrinks to fit its children.          |

When you create a **new** flex frame, the main axis defaults to hug content (unless wrapping, then fixed). The cross axis defaults to hug content.

When you **enable flex on an existing frame**, both axes default to fixed.

## Properties

| Property                                             | What it does                                                                                                                                                 |
|-----------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Wrap children**                                   | Items flow to a new row when they run out of space. Row direction only.                                                                                    |
| **Reverse stacking order**                           | Changes z-index order — which items appear on top of overlapping siblings.                                                                                  |
| **Include borders in items size**                   | When checked, item border thickness is included in the size calculation (border-box). When unchecked, borders are added outside the item's size (content-box). |

## Child sizing

Each flex child controls its own sizing on each axis:

| Mode     | Behavior                                     |
|----------|----------------------------------------------|
| **Fixed**       | Child keeps its set dimension.                  |
| **Fill parent** | Child expands to fill available space in the container.                                              |
| **Hug content** | Child shrinks to fit its own content.              |

Options are dynamically filtered based on what the parent-child combination supports.

### Auto margins

When a child is inside a flex container, you can enable auto margins on any edge — **Left (L)**, **Right (R)**, **Top (T)**, **Bottom (B)**. An auto margin pushes the child away from that edge, useful for pinning items to one side of the container.

## Parent-child conflicts

Not all sizing combinations work. Moio handles these automatically, but understanding why helps avoid confusion:

| Conflict                                   | What happens                           | Why                                                                                               |
|--------------------------------------------|----------------------------------------|---------------------------------------------------------------------------------------------------|
| **Hug parent + Fill child**               | Child's fill/grow is reset              | A hug parent has no extra space to distribute — it shrinks to fit children, so there's nothing to fill. |
| **Hug parent + Wrap**                     | Wrap is disabled                        | Wrap needs a fixed boundary to know where to break lines. A hug parent has no boundary.         |
| **Column + Wrap**                         | Wrap is disabled                        | Wrap only works with row direction. Switching to column auto-disables wrap.                     |
| **Hug parent + Start+End anchoring**     | Anchoring converts to center            | Start+end and scale anchoring are incompatible with hug sizing and get converted.

## Troubleshooting

### Wrap is unavailable

Wrap only works with **row** direction and **fixed** main-axis sizing. Check both settings.

### Items aren't wrapping

Your container is set to hug content on the main axis. Switch to fixed sizing so there's a boundary to wrap against.

### Items can't fill or grow

The container is using hug content on that axis. Switch to fixed sizing to give children space to expand into.

### I can't add flex layout

You may be trying to add it inside a component set, which isn't supported. Add flex layout to individual components or frames instead.