Skip to main content
Layout in FlowPilot is built from stacks: flexible containers that arrange their children in a row, a column, or stacked on top of each other. You size each component with simple controls (Auto, pixels, or percent) and the layout engine resolves the result for the device the flow runs on. Most flows target phones, so the canvas previews a phone-width screen.

​
Stacks

A stack is the only layout container, and it is where layout decisions are made. Select a stack (or a button, which lays out its content the same way) to see its Stack Settings section in the Layout tab.

​
Axis

The Axis control sets how children flow:
  • Vertical: children stack top to bottom (the default).
  • Horizontal: children sit left to right.
  • Layered: children stack on top of each other in the same space, ordered by z-index. Use this for overlays inside a stack.

​
Alignment

A stack has a Vertical and a Horizontal alignment. The options depend on the axis, because one axis is the main axis (the direction children flow) and the other is the cross axis. For a vertical stack:
  • Vertical (main axis): Top, Center, Bottom, Fill Equally, Space Evenly, Space Around, Space Between.
  • Horizontal (cross axis): Left, Center, Right, Stretch.
For a horizontal stack the two swap, so the main-axis options (Space Between and friends) move to Horizontal. For a layered stack both controls offer Top/Center/Bottom and Left/Center/Right plus Stretch. The “Space” options are how you spread children apart without a spacer component. Space Between pushes the first and last child to the edges, for example a back button on the left and a Skip button on the right of a horizontal stack.

​
Spacing, wrap, and scroll

  • Spacing: the gap between children, 0 to 100 px.
  • Wrap: No Wrap (default) or Wrap onto the next line.
  • Scroll: No Scroll, Scroll, Paginated, or Infinite. Use Scroll when a stack’s content can be taller than the screen.

​
Nesting

Stacks hold stacks. A typical screen is a vertical Root Stack with a few child stacks inside it (a header row, a content column, a footer row). Build structure by nesting, and keep the depth shallow so the tree stays readable.

​
Sizing

Every component (except the Root Stack) has a Size section. Width and height each have a small selector with three modes:
  • Auto: hug the content. The component is exactly as big as what is inside it.
  • px: a fixed size in points.
  • %: a percentage of the parent. Set width to 100% to fill the parent’s width.
You can also set Min and Max width and height. Leave them blank (“None”) for no limit. Min and max are the safety rails that keep a percentage or auto size from getting too small or too large.
Reach for Auto and % before fixed pixels. Auto height lets text grow when it wraps, and a percentage width adapts to different phone widths. Fixed pixel sizes are best for things that are genuinely fixed, like a 56 px tall button or a 1 px divider line.

​
Position

The Position section controls how a component is placed relative to its stack:
  • Normal: the component flows in the stack like everything else (the default). No offsets.
  • Relative, Absolute, Fixed, Sticky: take the component out of the normal flow. Offset fields (Top, Right, Bottom, Left) appear, and you can set a Z Index to control stacking order.
Use Absolute with offsets and a z-index for an overlay inside a screen, for example a badge in the corner of a card. For persistent UI that floats above every screen (a sticky footer button), use a zone instead.

​
Example: a centered card

Build a card that sits in the middle of the screen with a title and a button inside it.
1

Set the Root Stack to center its child

Select the Root Stack. In Stack Settings, set the Horizontal alignment to Center and the Vertical alignment to Center. The screen will now center whatever it holds.
2

Add a stack for the card

With the Root Stack selected, insert a Stack from Insert > Components. This is the card.
3

Size the card

Select the card stack. In Size, set Width to 90 % (or a fixed px width) and leave Height on Auto so it grows with its content. Add a Max width if you do not want it stretching on large screens.
4

Style and pad the card

In the Style tab, set a background fill in Layer and a corner radius in Border. In the Layout tab, open Spacing and add padding so the content does not touch the edges.
5

Add the content

Set the card stack’s Axis to Vertical, its Spacing to something like 12, and its Horizontal alignment to Center. Insert a Text and a Button inside it. They stack and center automatically.

​
Common mistakes

  • Fixed pixel widths that overflow small phones. A 375 px wide card looks fine on the canvas but clips on a 360 px device. Prefer % or a percentage with a sensible Max.
  • Forgetting the parent stack’s alignment. Children default to the top-left. If your content is hugging a corner, set the parent stack’s Vertical and Horizontal alignment.
  • Over-nesting. Deeply nested stacks are hard to follow and easy to misalign. Flatten where you can.
  • Setting offsets while Position is Normal. Top/Right/Bottom/Left only apply once Position is not Normal. Switch the mode first.