Flex layout

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.

Related

• Layout — base positioning, size, and constraints
• Components & behaviors — reusable elements within flex layouts
• Preview — test responsive behavior at different sizes