Stacks (Flexbox)

Blog Post

What is a Stack?

A Stack is a special type of Group that defines the layout of its child Layers.

A Stack Group icon has a special Blue color and an indicator of its Direction.

How to Stack?

To Stack layers or groups, select them and click the Stack button in Auto-Layout panel.

Stack Properties

A Stack has 3 properties:

  1. Direction: Defines if stacking of child Layers is Horizontal or Vertical.
  2. Alignment: Can be Top/Center/Bottom/Spread
  3. Spacing: Defines the spacing between each child Layer.

Direction

Defines if stacking of child Layers is Horizontal or Vertical.

Alignment

Can be Top/Center/Bottom/Spread

Spacing

Defines the spacing between each child Layer.

Stack Nesting

Stacks can be nested

Examples

Scaling Text Background

Sketch file

Tutorials

Walkthrough Video (29:09) by Pablo Stanley


Walkthrough Video (7:36) by Chris Slowik


Flex Grid Video (25:25)


Dynamic Buttons Blog Post by Giusè


Questions? Join our Community