Skip to main content

Flex layout

A Flex container arranges its items in a row or a column, and preview renders it as CSS flexbox. Direction, gap, padding and alignment work the way you expect, so this page covers only what differs. Also called: auto layout, stack, flexbox.

Managed layout​

Where: Properties panel → Managed layout, or right-click the selection → Add Flex layout (Shift + A).

A frame with a managed layout positions its children automatically. The Flex and Grid buttons under the section title switch its type (what carries over).

  • The + button in the section title (tooltip Enable managed layout) shows when the selection is only frames or has at least two layers, and always adds Flex. Add Grid layout is in the context menu only (Grid layout).
  • The − button (tooltip Disable managed layout), Shift + Alt + A and the context-menu entry Remove Flex layout remove it.
  • Switching the direction between Row and Column (icon buttons named by their tooltips, like Packed and Space between) keeps the physical result: alignment, each item's Fill axis and its auto margins change axis with it. Space between becomes Packed, and an item can lose its Width or Height binding (Width and Height).

Adding Flex to existing layers​

  • One selected frame without a managed layout gets Flex itself. Any other selection — several layers, a shape, an instance — is wrapped in a new Flex frame. So is a frame that already has a layout when you press Shift + A; the + button and the menu entry are hidden for it.
  • The direction is the one that needs fewer lines for the current arrangement, Row on a tie. A Row with more than one visual row turns Wrap children on.
  • Both gaps are the rounded average distance between neighbors: 10 when there is nothing to measure, never negative.
  • The order in the Layers panel is rewritten to match the visual order.
  • A frame that gets Flex stays Fixed at its size. Its padding is the smallest distance between a child and its edge, one value per axis, and 10 when it is empty. A new wrapper frame is Hug content, with a Fixed width when wrapping was inferred.
  • A wrapper created inside a Flex container takes that container's direction, leaves the layer order alone, and becomes Fill on an axis where a wrapped item was Fill.

Order and stacking​

Where: Properties panel → Managed layout → Reverse stacking order.

  • Item order is layer order: the first item is the top layer in the Layers panel.
  • Where items overlap, the first item is on top. Reverse stacking order puts the last item on top without reordering the items.
  • Arrow keys reorder the selected items instead of nudging them (keyboard shortcuts).

Gaps and wrapping​

Where: Properties panel → Managed layout → the two gap fields (tooltips Spacing between children and Spacing between rows) and Wrap children.

  • Spacing between children and Spacing between rows accept negative values, which make items overlap; padding doesn't. All of them can be bound.
  • With Space between, Spacing between children stays the minimum distance, and a single item is centered.
  • Wrap children exists for Row only; choosing Column turns it off.
  • Turning Wrap children on copies Spacing between children into Spacing between rows (the field next to the checkbox), unless that field is bound.
  • A Hug content width never wraps, unless the container has a Maximum width: items wrap there, and the container hugs the wrapped rows (min and max size).
  • Wrapped rows follow the container's vertical alignment; there is no separate control.

Strokes and padding​

Where: Properties panel → Managed layout → Include borders in items size, and the lock button in the padding control (tooltip Individual padding).

Include borders in items size is on by default and does two things:

  • An item's stroke takes layout space where it extends beyond the item: the full width for Outside, half for Center.
  • The container's own stroke is added to its padding: the full width for Inside, half for Center.

Strokes are Inside by default on frames and shapes and Outside on text, so for frames and shapes only the second effect shows until you move an item's stroke. With the option off, layout ignores strokes: they overlap the gap, and items sit under the container's stroke.

The padding lock works in pairs: Left padding also sets Right padding, and Top padding sets Bottom padding.

Auto margins​

Where: select Flex items → Properties panel, the untitled section above Managed layout → Auto margins → L, R, T, B.

An auto margin takes the free space on that side of an item, like margin: auto in CSS. Grid items don't have auto margins.

  • Along the container's direction, the auto margins of a line share its free space equally. Alignment and Space between stop applying to that line; the gap still does.
  • An item that is Fill along the direction takes the free space before the auto margins on its line do.
  • Across the direction, one auto margin pushes the item to the opposite side of its line and both center it, instead of the container's alignment.

Rotated layers​

  • A rotated item that isn't Fill on either axis takes the space of its rotated bounding box, and a Hug content container hugs that box. Preview reserves the same box.
  • An item that is Fill along the container's direction reserves its unrotated length, so its rotated corners overlap what is next to it.