Justify content (main axis) in Tailwind - Browser Rendering Trace

Render Flow - Justify content (main axis)

Parse Tailwind class

↓

Identify justify-content utility

↓

Match to CSS justify-content property

↓

Apply to flex container's main axis

↓

Recalculate flex item positions

↓

Paint updated layout

The browser reads the Tailwind class for justify-content, converts it to CSS, applies it to the flex container's main axis, then repositions the flex items accordingly before painting.

Render Steps - 3 Steps

Code Added:<div class="flex w-64 h-16 bg-gray-200">...</div>

Before

__________________________
|                          |
|                          |
|                          |
|                          |
|                          |
|                          |
|                          |
|                          |
|__________________________|

→

After

__________________________
|[          ][          ][          ]|
|[          ][          ][          ]|
|[          ][          ][          ]|
|[          ][          ][          ]|
|__________________________|

Adding 'flex' makes the container a flexbox, so children line up horizontally by default.

🔧 Browser Action:Creates flex formatting context, triggers layout recalculation.

Code Sample

A horizontal flex container with three colored boxes centered along the main axis.

Tailwind

<div class="flex justify-center w-64 h-16 bg-gray-200">
  <div class="w-12 h-12 bg-blue-500"></div>
  <div class="w-12 h-12 bg-red-500"></div>
  <div class="w-12 h-12 bg-green-500"></div>
</div>

Render Quiz - 3 Questions

After applying 'justify-center' (render_step 2), how are the flex items positioned?

A Centered horizontally with equal space on left and right

B Aligned to the left edge

C Aligned to the right edge

D Spread evenly with space between items

Common Confusions - 2 Topics

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

Justify-content aligns items along the main axis (horizontal in row direction). Vertical alignment needs align-items property.

💡 Use justify-content for horizontal alignment, align-items for vertical alignment (see render_step 2).

Why does justify-center not work if I forget to add 'flex' class?

Without 'flex', the container is not a flexbox, so justify-content has no effect.

💡 Always add 'flex' to enable flexbox behaviors (see render_step 1).

Property Reference

Property	Tailwind Class	Axis/Direction	Visual Effect	Common Use
justify-content	justify-start	Main axis (row)	Align items to start (left)	Default alignment
justify-content	justify-center	Main axis (row)	Center items horizontally	Centering content
justify-content	justify-end	Main axis (row)	Align items to end (right)	Right-align content
justify-content	justify-between	Main axis (row)	Distribute items with space between	Spread items evenly
justify-content	justify-around	Main axis (row)	Distribute items with space around	Even spacing around items
justify-content	justify-evenly	Main axis (row)	Distribute items with equal space	Equal spacing between and around

Concept Snapshot

Justify-content aligns flex items along the main axis (horizontal by default). Tailwind classes: justify-start (left), justify-center (center), justify-end (right), justify-between, justify-around, justify-evenly. Requires 'flex' class on container to work. Controls horizontal distribution of items in a flex container.