Justify content in CSS - Browser Rendering Trace

Render Flow - Justify content

[Parse CSS selector] -> [Match elements with display:flex] -> [Identify main axis (row)] -> [Apply justify-content property] -> [Calculate space distribution] -> [Position flex items along main axis] -> [Paint layout]

The browser reads the CSS, finds the flex container, then uses the justify-content property to decide how to space items horizontally along the main axis before painting them.

Render Steps - 5 Steps

Code Added:display: flex;

Before

[container]
| 1 | 2 | 3 |

→

After

[container]
[1][2][3]

The container becomes a flex container, so its children line up horizontally in a row by default.

🔧 Browser Action:Creates flex formatting context and treats children as flex items.

Code Sample

A horizontal row of three boxes centered inside a bordered container with space between them.

CSS

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  border: 1px solid black;
  padding: 1rem;
  gap: 1rem;
}
.item {
  background-color: lightblue;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  text-align: center;
}

Render Quiz - 3 Questions

After applying step 3 (justify-content: center), how are the items positioned inside the container?

A Items spread out with equal space between them but no space at edges.

B Items are centered horizontally with equal space on left and right sides.

C Items align to the left with extra space on the right.

D Items align to the right with extra space on the left.

Common Confusions - 3 Topics

Why don't my items center when I use justify-content: center?

If the container is not set to display:flex, justify-content has no effect. Also, justify-content works along the main axis, so if flex-direction is column, it centers vertically, not horizontally.

💡 Always set display:flex and check flex-direction to know which axis justify-content affects.

Why is there extra space only on one side when I use justify-content: flex-start?

flex-start aligns items to the start edge, so leftover space stays at the end side of the container.

💡 flex-start means items hug the left (or start) side, space goes to the right (or end).

Why do space-around and space-between look different even though both add space?

space-between puts space only between items, none at edges; space-around adds equal space around each item, so edges get half the space compared to between items.

💡 space-around includes edges with half spacing, space-between does not.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
justify-content	flex-start	Main axis (row by default)	Items align to start edge, leftover space at end	Default alignment in flexbox
justify-content	center	Main axis	Items centered horizontally with equal space on sides	Centering items in a row
justify-content	flex-end	Main axis	Items align to end edge, leftover space at start	Right-align items in a row
justify-content	space-between	Main axis	Items spread out with equal space between, no space at edges	Even spacing between items
justify-content	space-around	Main axis	Items spaced with equal space around each, edges get half space	Balanced spacing including edges
justify-content	space-evenly	Main axis	Items spaced with equal space between and edges	Uniform spacing everywhere

Concept Snapshot

Justify-content controls horizontal spacing of flex items along the main axis. Default is flex-start (items at start). Common values: center (center items), space-between (equal gaps between), space-around (equal space around). Requires display:flex on container. Affects only main axis (row by default).