Align items (cross axis) in Tailwind - Browser Rendering Trace

Render Flow - Align items (cross axis)

[Parse Tailwind class] -> [Identify flex container] -> [Set align-items property] -> [Calculate cross axis alignment] -> [Reflow layout] -> [Paint elements] -> [Composite layers]

The browser reads the Tailwind class, applies the corresponding CSS 'align-items' property to the flex container, calculates how children align along the cross axis, then repaints the layout accordingly.

Render Steps - 5 Steps

Code Added:<div class="flex h-24 border"> ... </div>

Before

[Container]

[ ] [ ] [ ]

→

After

[Container: 6rem tall, border]

[ ] [ ] [ ]

The container becomes a flex container with a fixed height and border, but items are not yet aligned vertically.

🔧 Browser Action:Creates flex formatting context, triggers layout calculation

Code Sample

A horizontal flex container with three colored boxes of different heights, all vertically centered inside a taller container.

Tailwind

<div class="flex items-center h-24 border">
  <div class="w-12 h-12 bg-blue-500"></div>
  <div class="w-12 h-16 bg-red-500"></div>
  <div class="w-12 h-8 bg-green-500"></div>
</div>

Tailwind

/* Tailwind classes translate to: */
.flex { display: flex; }
.items-center { align-items: center; }
.h-24 { height: 6rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-8 { height: 2rem; }
.border { border: 1px solid #000; }

Render Quiz - 3 Questions

After applying step 5 (items-center), how are the child boxes aligned vertically inside the container?

A They are aligned at the bottom of the container.

B They are aligned at the top of the container.

C They are vertically centered along the container's height.

D They stretch to fill the container height.

Common Confusions - 3 Topics

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

The container must have a fixed height or enough height to see vertical centering. Without height, centering won't be visible (see render_steps 1 and 5).

💡 Set container height to see vertical alignment effects.

Why does 'align-items: center' not affect horizontal alignment?

'align-items' controls cross axis alignment (vertical in row direction). Horizontal alignment is controlled by 'justify-content' (main axis).

💡 'align-items' = vertical alignment in row flex; 'justify-content' = horizontal alignment.

Why do items stretch when I don't set 'align-items'?

The default 'align-items' is 'stretch', so items fill the container height unless you override it (see property_table).

💡 Use 'items-center' to override default stretching.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
align-items	flex-start	Cross axis (vertical in row)	Items align at top of container	Default vertical alignment
align-items	center	Cross axis	Items align vertically centered	Center items vertically in flex row
align-items	flex-end	Cross axis	Items align at bottom of container	Align items to bottom
align-items	stretch	Cross axis	Items stretch to fill container height	Make items fill container height

Concept Snapshot

Tailwind 'items-center' sets CSS 'align-items: center' on a flex container. This aligns flex items vertically centered along the cross axis (vertical in row direction). Default 'align-items' is 'stretch', making items fill container height. Container needs fixed height to see vertical alignment effects. Use 'items-start' or 'items-end' for top or bottom alignment.