Flow CSS Utility

A technique coined by Andy Bell used to provide flow and ryhthm between direct sibling components.

The rule looks like this

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

Then all direct siblings from an element with the .flow class (except the first) will have a margin top equal to its font size. We can override this value by setting a different —flow-space value in an element.

This is useful cause we can set the override directly in the HTML via a style tag

<ul class="flow">
    <li>Item 1</li>
    <li>Item 2</li>
    <li style="--flow-space: 3em;">Item 3</li>
    <li>Item 4</li>
</ul>

#css

Source: Flow CSS Utility - Piccalilli