Flow

Flow is just display: flex and flex-wrap: wrap. It’s named Flow because it allows elements within to flow to another line when there’s insufficient space.

Let items flow to the next line

Flow is just display: flex with flex-wrap, but it’s much easier to remember and use.

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

Lorem

ipsum

dolor

sit

amet

consectetur

adipisicing

elit

Adjust the space between items easily

With Flow, you can adjust space between items with gap. It’s more intuitive than margin because there’s no need to deal with “margin collapse”.

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

Lorem

ipsum

dolor

sit

amet

consectetur

adipisicing

elit

Easily justify items to the left, center, or right.

You can use justify-content to shift all items to the left, center, or right.

Start

One

Two

Three

Center

One

Two

Three

End

One

Two

Three

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>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for Vertical.

.Flow {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap, 1rem);
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Flow

Horizontal alignment

Class	Description
`justify-start`	Aligns children items to the left.
`justify-center`	Aligns children items to the center.
`justify-end`	Aligns children items to the right.
`justify-around`	Distributes spaces equally around items
`justify-between`	Distributes space equally between items

CSS Variables

Variable	Default	Description
`--gap`	1rem	Gap between items

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.