Splendid Labz

Basic Usage

flow lets content flow to the next row when there is insufficient space.

<div class="flow">...</div>

Changing Gap

You can change the gap between items with the gap property or the --gap variable.

<div class="flow gap-8"> ... </div>

<div class="flow" style="--gap:2rem"> ... </div>

Justifying Content

Since flow uses display:flex, you can use justify-content to align items horizontally.

<div class="flow justify-start">...</div>
<div class="flow justify-center">...</div>
<div class="flow justify-end">...</div>
<div class="flow justify-space-around">...</div>
<div class="flow justify-space-between">...</div>

<div class="flow" style="justify-content: start">...</div>
<div class="flow" style="justify-content: center">...</div>
<div class="flow" style="justify-content: end">...</div>
<div class="flow" style="justify-content: space-around">...</div>
<div class="flow" style="justify-content: space-between">...</div>

Aligning Items

Likewise, you can use align-items to align items vertically. Though you probably won’t need to do this often.

<div class="flow items-stretch">...</div>
<div class="flow items-start">...</div>
<div class="flow items-center">...</div>
<div class="flow items-end">...</div>
<div class="flow items-baseline">...</div>

<div class="flow" style="align-items: stretch">...</div>
<div class="flow" style="align-items: start">...</div>
<div class="flow" style="align-items: center">...</div>
<div class="flow" style="align-items: end">...</div>
<div class="flow" style="align-items: baseline">...</div>