The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element.
- Code language
- css
.flow > * + * { margin-block-start: var(--flow-space, 1em); }
By defining --flow-space in the CSS of either a child element of .flow, or on .flow itself: that value will be honoured in line with the cascade and specificity.
For example: if you set --flow-space: 3rem on the third element inside of a .flow container: only that element will have a 3rem top margin.
This is by far my most used CSS snippet and I add it to every project I work on without fail.
Those of you that have used Every Layout will probably recognise this as The Stack, which evolved from an article I wrote back in 2018, for the legendary 24 Ways.
