The "Layout & Transform" panel lets a frame arrange its children automatically. flowmo offers three layout modes — free (absolute), Stack (Flex), and Grid.
Where: Right sidebar → "Layout & Transform" section → "Type" picker — Select a frame, then pick Stack (Flex) / Grid in the Type row, or press Shift+A to toggle Auto Layout
Key ideas
- Three layout modes: The Type picker offers free-mode (no flow, absolute children), "Stack (Flex)", and "Grid". A "More" popover adds Block, Inline, Inline Block, Table, None, or a custom value.
- Flex controls: In Stack (Flex): Direction (row/column/reverse), Distribute (justify-content: Start/Center/End/Between), Align (align-items: Stretch/Start/Center/End), Wrap (nowrap/wrap/wrap-reverse).
- Gap lives in Spacing: Gap is set in the Spacing block (one value, or unlink to Row/Col), not in the Layout row. It only appears for flex/grid containers.
- Shift+A: Toggles Auto Layout — flipping a free-positioned frame into an inferred flex layout and back.
Steps
- Select a frame or container on the canvas.
- In the right sidebar open "Layout & Transform" and use the Type row to pick "Stack (Flex)" (or press Shift+A).
- Set Direction (row/column), then Distribute (main axis) and Align (cross axis).
- Turn on Wrap if children should flow to the next line.
- Open the Spacing block to set Gap (unlink for separate Row/Col gaps).
- In the Size block, set Grow/Shrink/Basis on children (these appear when the parent is flex).
FAQ
Where is Gap?
In the Spacing block of "Layout & Transform", not the Layout row. It only shows for flex/grid containers.
Can I use CSS Grid instead?
Yes — pick "Grid" in the Type row. See the Grid / Layout Types article for the Grid Template editor.