Flex Flow

Shorthand for:

flex-direction

From flex-direction (FlexBox Property)

graph LR FD[flex-direction, Controls:] --> Order[Which order] FD --> Direction[Which direction] FD --> Side[From which side of the box] Order --> Placement[the elements are placed] Direction --> Placement Side --> Placement

Flex Direction Controls:

which order
which direction
from which side of the box

the elements are placed.

/* 
There are 4 values for the property, example setting this property
where ul represents a flex container, */
ul {
  flex-direction: row || column || row-reverse || column-reverse;
}

GT-Sandbox-Snapshot

Command to reproduce:

gt.sandbox.checkout.commit 870edcc21fa6ffb73d26 \
&& cd "${GT_SANDBOX_REPO}" \
&& cmd.run.announce "chrome ./main/index.html"

Recorded output of command:

       _chrome ./main/index.html
Opening in chrome: ./main/index.html

Controls main axis direction (vertical/horizontal)

The flex-direction controls whether main-axis is vertical or horizontal.

Below is example of axis when flex-direction is set to row

flex-wrap

From Flex Wrap

Go to text →

#llm.o4-mini-high

The flex-wrap property determines whether flex items are forced onto a single line or can wrap onto multiple lines when they overflow the container.

Values & Behavior

Value	Description
`nowrap`	All items stay on one line. Items will shrink (if allowed) rather than wrap.
`wrap`	Items wrap onto multiple lines from top to bottom (for `flex-direction: row`).
`wrap-reverse`	Items wrap onto multiple lines but in reverse order (bottom to top for rows).

.container {
  display: flex;
  flex-wrap: wrap; /* allow wrapping */
}

Code Example

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 300px; /* container narrower than 4 items */
}
.item {
  flex: 1 1 100px; /* grow, shrink, base width */
}

Result: Items 1–3 fit on the first row; item 4 wraps onto the second row.*

Use Cases

Responsive Galleries: Automatically move thumbnails to new rows when the viewport narrows.
Navigation Menus: Wrap menu items to a second line on smaller screens instead of shrinking text.
Tag Clouds & Chips: Let labels flow onto multiple lines gracefully.

Tip: Combine with justify-content and align-content to control spacing of wrapped lines.

Example

ul {
	flex-flow: row wrap; /*direction [row] and [wrap] items */
}

Backlinks

Flexbox Properties

Example