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