- Anima for Sketch
- Anima for Sketch
- Install Plugin
- Install Plugin
- Create a Project
- Create a Project
- Preview & Sync Project
- Preview & Sync Project
- Upgrade a Team
- Upgrade a Team
- Tutorial Files
- Tutorial Files
- Introduction
- Introduction
- Pins
- Pins
- Stacks (Flexbox)
- Stacks (Flexbox)
- Padding
- Padding
- Screen Presets
- Screen Presets
- Keyboard Shortcuts
- Keyboard Shortcuts
- Symbols
- Symbols
- Examples
- Examples
- Introduction
- Introduction
- Links
- Links
- Breakpoints
- Set Homepage
- Breakpoints
- Set Homepage
- Hover Effects
- Hover Effects
- Entrance Animation
- Entrance Animation
- Fixed Position
- Fixed Position
- Text Input & Forms
- Text Input & Forms
- Videos/GIFs/Lottie
- Videos/GIFs/Lottie
- Embed Code
- Embed Code
- Interaction & Animation
- Interaction & Animation
- Interactions Intro
- Interactions Intro
- Samples
- Samples
- Play
- Breakpoints Viewport
- Comments
- Code
- Share Prototype
- Manage Access Levels
- Publish Website
- Publish Website
- Custom Domains
- Custom Domains
- Analytics
- Analytics
- Project Settings
- Project Settings
Getting Started
Layout
Prototype
Collaborate
Prototype Link
Project Settings
Built with ❤️   in NYC & TLV
Stacks (Flexbox)
What Is a Stack?
A Stack is a special type of Group that defines the layout of its child Layers.
How to Stack?
To Stack layers or groups, select them and click the Stack button in Layout panel.
Stack Properties
A Stack has 3 properties:
- 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
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.
Collapsing
When you hide a layer, or override a symbol to ‘none’, the stack will ignore it while rearranging the other layers.
Notice how in the example below, the Body Layer replaces the space of the hidden Subtitle Layer when collpasing is checked in.
Stack Nesting
Stacks can be nested within other Stacks.
Symbol Resizing
If you have a single Stack Group as a Symbol, it will resize the Symbol instance for Overrides. This is optional, but default for new Stacks is On.
Negative Spacing
You can use negative values. Main use-case here is overlapping border.
Scrubbing Spacing
Click the spacing label and drag it to the sides for easier use.
Stack Examples
Scaling Text Background
Sample Sketch File: Download
Stack Tutorials
Note: Some of these tutorials use an older Anima interface.
Walkthrough Video (29:09) by Pablo Stanley
Questions? Join our Community