Layout

Flow

The .flow layout adds consistent vertical spacing between direct children, keeping sections readable without individual margins.

Usage

• Add class="flow" to a parent.
• Set the --flow-space custom property globally or override it on a specific flow container. The default value is .
• Replace .flow with .flow-tight for compact spacing or .flow-loose for larger spacing.

The value of --flow-space inherits through descendant elements. Setting it on a parent therefore changes any nested flow container that uses --flow-space, unless a descendant sets its own value. By contrast, .flow-tight and .flow-loose apply spacing only between the direct children of the element they are added to. They do not affect nested flow containers.

Built-in flow

Flow applies by default to:

• Classless main, article, and section.
• Components such as .card, .alert, menu containers, and modal content.