Flex wrap in CSS - Browser Rendering Trace

Render Flow - Flex wrap

Parse selector: .container

↓

Match element: div.container

↓

Apply display:flex

↓

Apply flex-wrap property

↓

Calculate flex items layout

↓

Wrap items to new line if needed

↓

Paint items

↓

Composite final layout

The browser reads the CSS selector, applies flexbox layout to the container, then uses the flex-wrap property to decide if flex items stay in one line or wrap to new lines before painting.

Render Steps - 4 Steps

Code Added:display: flex;

Before

[container]
  [item 1]
  [item 2]
  [item 3]
  [item 4]
  [item 5]

→

After

[container: flex row]
[item 1][item 2][item 3][item 4][item 5]

The container becomes a flex container arranging items in a single horizontal row.

🔧 Browser Action:Creates flex formatting context, triggers reflow

Code Sample

A flex container with items that wrap onto multiple lines when they don't fit in one row.

CSS

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

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  width: 15rem;
  border: 2px solid #333;
  gap: 0.5rem;
}
.item {
  background: #88c;
  color: white;
  padding: 1rem;
  flex: 0 0 6rem;
  text-align: center;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 3 (flex-wrap: wrap), how are the flex items arranged?

A Items wrap onto multiple lines within the container width

B Items stay in one line and overflow container

C Items stack vertically in a single column

D Items disappear from the container

Common Confusions - 2 Topics

Why do my flex items overflow the container even though I set flex-wrap: wrap?

If the container has no fixed width or max-width, items may not wrap because they have unlimited space. Setting a width (like in step 2) limits container size and allows wrapping.

💡 Wrap only works visibly when container width is limited.

Why is there no space between wrapped lines?

By default, flexbox does not add space between rows. Adding gap (step 4) creates consistent spacing horizontally and vertically.

💡 Use gap property to add space between flex items and rows.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
flex-wrap	nowrap	Main axis (row by default)	All items stay in one line, may overflow container	Default flex behavior
flex-wrap	wrap	Main axis	Items wrap onto multiple lines if needed	Create multi-line flex layouts
flex-wrap	wrap-reverse	Main axis	Items wrap onto multiple lines in reverse order	Reverse wrap direction

Concept Snapshot

flex-wrap controls if flex items stay in one line or wrap to new lines. Default is nowrap (one line, may overflow). wrap allows multiple lines inside container. Container width limits wrapping behavior. gap adds space between items and rows. Use flex-wrap for responsive multi-line layouts.