Order and self-alignment in Tailwind - Browser Rendering Trace

Render Flow - Order and self-alignment

[Parse Tailwind classes] -> [Identify flex container and items] -> [Apply order property to items] -> [Apply self-alignment to individual items] -> [Calculate final layout positions] -> [Paint items in new order and alignment]

The browser reads Tailwind classes, applies the order property to rearrange flex items, then applies self-alignment to individual items, recalculates layout, and paints the final visual order and alignment.

Render Steps - 3 Steps

Code Added:<div class="flex h-24 bg-gray-100">...</div>

Before

[Empty container]
____________________

→

After

[Container with 3 boxes in source order]
[A][B][C]
____________________

The flex container is created with default horizontal layout, showing items in source order A, B, C.

🔧 Browser Action:Creates flex formatting context and lays out children in row direction.

Code Sample

A horizontal flex container with three colored boxes reordered and individually aligned vertically using Tailwind's order and self-alignment classes.

Tailwind

<div class="flex h-24 bg-gray-100">
  <div class="order-3 self-start bg-red-400 w-16 h-16">A</div>
  <div class="order-1 self-center bg-green-400 w-16 h-16">B</div>
  <div class="order-2 self-end bg-blue-400 w-16 h-16">C</div>
</div>

Render Quiz - 3 Questions

After applying step 2, what is the visual order of the boxes?

A A, B, C

B C, A, B

C B, C, A

D A, C, B

Common Confusions - 2 Topics

Why does changing order not affect vertical alignment?

Order only changes the horizontal sequence of items, it does not affect their vertical position. Vertical alignment is controlled separately by self-alignment properties (see step 3).

💡 Order rearranges left-to-right order; self-alignment moves items up/down.

Why doesn't self-align center all items?

Self-alignment applies only to the individual item it is set on. Other items keep the container's default alignment unless they have their own self-alignment.

💡 Each item can override vertical alignment independently.

Property Reference

Property	Tailwind Class	Effect on Layout	Axis/Direction	Common Use
order	order-{number}	Changes visual order of flex items	Main axis (row by default)	Rearranging items without changing HTML
align-self	self-start	Aligns item to start of cross axis	Cross axis (vertical in row flex)	Individual vertical alignment
align-self	self-center	Centers item on cross axis	Cross axis	Centering single item vertically
align-self	self-end	Aligns item to end of cross axis	Cross axis	Bottom aligning single item

Concept Snapshot

Order property changes the horizontal sequence of flex items without altering HTML. Self-alignment (align-self) lets individual items move vertically inside the flex container. Tailwind uses order-{number} and self-{start|center|end} classes. Default flex direction is row; order affects main axis, self-align affects cross axis. Use order to rearrange visually; use self-align to adjust vertical position per item.