Align items in CSS - Browser Rendering Trace

Render Flow - Align items

[Parse CSS selector 'display:flex'] -> [Set container as flexbox] -> [Parse 'align-items' property] -> [Calculate cross axis alignment] -> [Position flex items vertically] -> [Paint updated layout] -> [Composite final frame]

The browser reads the CSS, sets the container as a flexbox, then applies the 'align-items' property to position children along the vertical (cross) axis before painting and compositing the final layout.

Render Steps - 3 Steps

Code Added:display: flex;

Before

[Container]
[Box 1]
[Box 2]
[Box 3]

→

After

[Container: flex row]
[Box 1][Box 2][Box 3]

Setting display:flex changes the container to a flexbox, arranging children in a horizontal row by default.

🔧 Browser Action:Creates flex formatting context, triggers reflow to arrange children in a row.

Code Sample

A horizontal row of three blue boxes inside a bordered container, vertically centered using align-items: center.

CSS

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

CSS

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

Render Quiz - 3 Questions

After applying step 1 (display:flex), how are the boxes arranged inside the container?

A Stacked vertically, one on top of another

B In a horizontal row, side by side

C Overlapping each other in the same spot

D Hidden and not visible

Common Confusions - 2 Topics

Why don't my flex items center vertically when I use align-items: center?

If the container has no height or the height is too small, vertical centering won't be visible. You need to set a height on the container to see the effect (see step 2).

💡 Always give the flex container some height to see vertical alignment.

Why does align-items: stretch make my items taller than expected?

The default value 'stretch' makes flex items expand to fill the container's height if no height is set on the items themselves (see property_table).

💡 Set a fixed height on flex items to prevent stretching.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
align-items	flex-start	Cross axis (vertical)	Aligns items to the top of the container	Align items at top
align-items	center	Cross axis (vertical)	Centers items vertically within container	Center items vertically
align-items	flex-end	Cross axis (vertical)	Aligns items to the bottom of the container	Align items at bottom
align-items	stretch	Cross axis (vertical)	Stretches items to fill container height	Fill container height
align-items	baseline	Cross axis (vertical)	Aligns items along their text baseline	Align text baseline

Concept Snapshot

align-items controls vertical alignment of flex items. Default is 'stretch' which fills container height. Common values: flex-start (top), center (middle), flex-end (bottom). Requires container height to see vertical alignment. Works on cross axis (vertical in row direction).