Flow

flow is vertical with flex-wrap: wrap. It’s named flow because it allows elements within to flow to subsequent lines when there’s insufficient space.

Let items flow to the next line

flow is horizontal with flex-wrap so items can flow to subsequent lines.

<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 purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Here’s the CSS for flow.

.flow {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));

  > .spacer {
    margin-block-start: auto;
  }

  > *,
  > :where(.contents) > *,
  > *:where(astro-island, astro-slot) > * {
    flex-grow: var(--grow);
  }
}

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Flow

Horizontal alignment classes

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-x`	-	Gap between on the x-axis
`--gap-y`	-	Gap between rows on the y-axis
`--gap`	`1rlh`	Gap between items on both axes. `--gap-x` and `--gap-y` will override this value.

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.