Stack

The stack component creates a flex container with equal margins between all child elements. Child elements will wrap to a new row if the total width excedes the stack’s width.

Variants

Stack stack

A basic stack

  • 
    
    <div class="stack">
      <span>…</span>
      <span>…</span>
      …
      <span>…</span>
    </div>

Usage

Combined with flex utility classes

The stack component can be combined with flex utility classes to achieve layouts that ensure immediate child nodes will always have a minimum margin.

Class Name Description
stack

The block-level stack class. No top or left margin should be applied to this element or any child elements.