Align content in CSS - Browser Rendering Trace

Render Flow - Align content

Parse CSS rules

↓

Match .container element

↓

Check display: flex or grid

↓

Calculate align-content property

↓

Distribute extra space on cross axis

↓

Reposition flex/grid lines

↓

Paint updated layout

↓

Composite final frame

The browser reads the CSS, finds the container with flex or grid display, then uses align-content to arrange multiple lines along the cross axis, finally painting the updated layout.

Render Steps - 3 Steps

Code Added:display: flex; flex-wrap: wrap;

Before

[Container]
  (items stacked vertically)
  [1]
  [2]
  [3]
  [4]
  [5]
  [6]

→

After

[Container]
  [1][2][3]
  [4][5][6]

Setting display:flex with wrap arranges items in rows, wrapping to next line when space runs out.

🔧 Browser Action:Creates flex formatting context and generates flex lines

Code Sample

A flex container with wrapped items arranged in multiple rows, aligned vertically centered using align-content.

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 class="item">6</div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  height: 12rem;
  border: 2px solid #333;
  align-content: center;
}
.item {
  flex: 0 0 4rem;
  height: 4rem;
  background: #8ac;
  margin: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 1, how are the flex items arranged inside the container?

A All in a single row without wrapping

B Stacked vertically in a single column

C In multiple rows wrapping when needed

D Hidden from view

Common Confusions - 3 Topics

Why doesn't align-content do anything when I have only one row of flex items?

align-content only affects multiple lines of items. If flex-wrap is off or items fit in one line, no extra lines exist to align.

💡 Use align-items to align items inside a single line; align-content works on multiple lines.

Why is there extra space below my flex items inside the container?

If container height is bigger than total rows height, extra space appears. align-content controls how that space is distributed.

💡 Set container height and use align-content to control vertical distribution of wrapped lines.

Why doesn't align-content work if I use display:block or inline-block?

align-content only works on flex or grid containers with multiple lines. Block or inline-block don't create flex lines.

💡 Ensure display:flex or display:grid with wrapping for align-content to have effect.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
align-content	flex-start	Cross axis (vertical in row flex)	Lines packed at start of container	Default alignment of wrapped lines
align-content	center	Cross axis	Lines centered with equal space above and below	Center multiple rows vertically
align-content	flex-end	Cross axis	Lines packed at end of container	Align lines to bottom or right
align-content	space-between	Cross axis	Lines spaced evenly, first at start, last at end	Distribute lines with gaps
align-content	space-around	Cross axis	Lines spaced evenly with equal space around each line	Even spacing around lines
align-content	stretch	Cross axis	Lines stretched to fill container height	Fill vertical space with lines

Concept Snapshot

align-content controls how multiple lines of flex or grid items are spaced along the cross axis. It only works when flex-wrap or grid creates multiple lines. Common values: flex-start (top), center (middle), flex-end (bottom), space-between, space-around, stretch. Use align-content to vertically center or distribute wrapped rows inside a fixed-height container. For single line alignment, use align-items instead.