Flow Utility

Our flow utility is constructed as follows:

.flow > * + * {
margin-top: var(--flow-space, 1em);


Our flow utility is heavily inspired by Every Layout's Flow utility. As quoted:

The trick is to style the context, not the individual element(s). The Stack layout primitive injects margin between elements via their common parent:


<ul class="[ stacked-list ] [ flow ]"></ul>
.stacked-list {
--flow-space: 1.5em;