> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout and sizing

> Build layouts with stacks, size components with Auto, px, or percent, and place overlays with position and z-index.

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.

<Note>
  The raw stack, size, and position controls on this page are an **Advanced mode** surface. In [Simple mode](/editor/editing-modes) you arrange whole blocks rather than nesting stacks by hand: spacing is set inside each [block controller](/editor/block-controllers), and the only nesting is the [container blocks](/editor/element-library#container-blocks) (Columns, Rows, Carousel). Absolute, fixed, and sticky positioning are Advanced-only.
</Note>

## 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.

<Tip>
  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.
</Tip>

## 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](/editor/zones) instead.

## Example: a centered card

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="Add a stack for the card">
    With the Root Stack selected, insert a **Stack** from Insert > Components. This is the card.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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.

## Related pages

* [The properties panel](/editor/properties)
* [Components](/editor/components)
* [Zones](/editor/zones)
* [Flow schema reference](/reference/flow-schema)