Flex Flow

Shorthand for:

flex-direction

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

Link to original

flex-wrap

Flex Wrap

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.

Link to original

Example

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