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).

Practice

1. What does the CSS property justify-content control in a flex container?

easy

A. The vertical alignment of items inside the container

B. The horizontal alignment of items inside the container

C. The size of the container

D. The color of the items

Solution

1. Step 1: Understand the role of justify-content

   This property controls how items are aligned horizontally inside a flex or grid container.

2. Step 2: Differentiate from vertical alignment

   Vertical alignment is controlled by align-items, not justify-content.

3. Final Answer:

   The horizontal alignment of items inside the container -> Option B

4. Quick Check:

   Justify content = horizontal alignment [OK]

Hint: Justify content aligns items left to right [OK]

Common Mistakes:

• Confusing justify-content with align-items
• Thinking it changes item size
• Assuming it controls colors

2. Which of the following is the correct syntax to center items horizontally using justify-content in a flex container?

easy

A. justify-content: center-items;

B. justify-content: middle;

C. justify-content: align-center;

D. justify-content: center;

Solution

1. Step 1: Recall valid values for justify-content

   Common valid values include flex-start, center, space-between, and space-around.

2. Step 2: Identify the correct syntax for centering

   The correct value to center items horizontally is center, so the syntax is justify-content: center;.

3. Final Answer:

   justify-content: center; -> Option D

4. Quick Check:

   Centering uses 'center' value [OK]

Hint: Use 'center' exactly to center items [OK]

Common Mistakes:

• Using invalid values like 'middle' or 'align-center'
• Missing the colon or semicolon
• Confusing with align-items syntax

3. Given this CSS and HTML, what will be the horizontal spacing of the items inside the container?

div.container {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

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

medium

A. Items are grouped together on the left

B. Items are centered with equal space around them

C. Items are evenly spaced with equal space between them

D. Items are aligned to the right

Solution

1. Step 1: Understand justify-content: space-between;

   This value places the first item at the start, the last item at the end, and evenly distributes space between the items.

2. Step 2: Visualize the layout

   With three items, the spaces between them are equal, but no extra space is added at the container edges.

3. Final Answer:

   Items are evenly spaced with equal space between them -> Option C

4. Quick Check:

   Space-between = equal gaps between items [OK]

Hint: Space-between puts equal gaps only between items [OK]

Common Mistakes:

• Thinking space-between adds space around edges
• Confusing with space-around or center
• Assuming items cluster on one side

4. Identify the error in this CSS code that prevents justify-content from working:

div.container {
  display: block;
  justify-content: center;
}

medium

A. The container must have display: flex; or display: grid; for justify-content to work

B. The property name should be justify-items instead

C. The value 'center' is invalid for justify-content

D. The container needs a fixed width

Solution

1. Step 1: Check the display property

   justify-content only works on flex or grid containers, but here display is set to block.

2. Step 2: Understand the requirement for flex/grid

   Without display: flex; or display: grid;, justify-content has no effect.

3. Final Answer:

   The container must have display: flex; or display: grid; for justify-content to work -> Option A

4. Quick Check:

   Justify-content needs flex or grid [OK]

Hint: Use flex or grid display for justify-content to work [OK]

Common Mistakes:

• Using justify-content on block containers
• Confusing justify-content with justify-items
• Thinking value 'center' is invalid

5. You want to create a navigation bar with 4 links spaced evenly across the width, but with equal space around each link (including edges). Which justify-content value should you use in your flex container?

hard

A. space-around

B. flex-start

C. center

D. space-between

Solution

1. Step 1: Understand the difference between space-between and space-around

   space-between puts equal space only between items, no space at edges. space-around adds equal space around each item, including edges.

2. Step 2: Match requirement to property value

   Since the requirement is equal space around each link including edges, space-around is the correct choice.

3. Final Answer:

   space-around -> Option A

4. Quick Check:

   Space-around = equal space around all items [OK]

Hint: Use space-around for equal space including edges [OK]

Common Mistakes:

• Choosing space-between which skips edges
• Using center which groups items
• Using flex-start which aligns left only