Flow Utility
Our flow utility is constructed as follows:
.flow > * + * {
margin-top: var(--flow-space, 1em);
}
Purpose
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:
Example
<ul class="[ stacked-list ] [ flow ]"></ul>
.stacked-list {
--flow-space: 1.5em;
}