Justify content in CSS - Mini Project: Build & Apply

Align Boxes Using Justify Content

📖 Scenario: You are creating a simple webpage section that displays three colored boxes in a row. You want to control how these boxes are spaced horizontally inside their container.

🎯 Goal: Build a webpage with a container holding three boxes. Use CSS Flexbox and the justify-content property to align the boxes horizontally in different ways.

📋 What You'll Learn

Create a container with three boxes inside

Use CSS Flexbox on the container

Add a CSS variable --justify-value to control the justify-content property

Apply the justify-content property using the CSS variable

Boxes should have distinct background colors and fixed size

The layout should be responsive and accessible

💡 Why This Matters

🌍 Real World

Web developers often need to arrange elements horizontally with flexible spacing. Using justify-content with flexbox is a common way to do this in navigation bars, galleries, or toolbars.

💼 Career

Understanding flexbox and justify-content is essential for front-end developers to create responsive and well-aligned layouts that work on different screen sizes and devices.

1

Create the HTML container and boxes

Write HTML code to create a <section> element with class container. Inside it, add three <div> elements with classes box1, box2, and box3. Each box should contain text: "Box 1", "Box 2", and "Box 3" respectively.

CSS

Hint

Use a <section> with class container. Inside, add three <div> elements with the exact classes and text.

2

Add CSS Flexbox and a CSS variable for justify-content

In a <style> block or CSS file, create a CSS rule for .container. Set display: flex; and define a CSS variable called --justify-value with the initial value flex-start.

CSS

  Box 1
  Box 2
  Box 3



.container {
  /* Add display flex and CSS variable --justify-value with value flex-start */
}

Hint

Use display: flex; on .container. Define --justify-value: flex-start; inside the same rule.

3

Apply justify-content using the CSS variable and style boxes

In the .container CSS rule, add justify-content: var(--justify-value);. Then create CSS rules for .box1, .box2, and .box3 to set their width to 6rem, height to 6rem, and background colors to #ff6666, #66ff66, and #6666ff respectively.

CSS

  Box 1
  Box 2
  Box 3



.container {
  display: flex;
  --justify-value: flex-start;
  /* Add justify-content using the CSS variable here */
}

/* Add styles for .box1, .box2, .box3 here */

Hint

Use justify-content: var(--justify-value); inside .container. Set width, height, and background-color for each box as described.

4

Make the container responsive and add accessibility

Add a CSS media query for screens narrower than 30rem to change flex-direction of .container to column. Also add aria-label="Box container" attribute to the <section> element for accessibility.

CSS

  Box 1
  Box 2
  Box 3



.container {
  display: flex;
  --justify-value: flex-start;
  justify-content: var(--justify-value);
}

.box1 {
  width: 6rem;
  height: 6rem;
  background-color: #ff6666;
}

.box2 {
  width: 6rem;
  height: 6rem;
  background-color: #66ff66;
}

.box3 {
  width: 6rem;
  height: 6rem;
  background-color: #6666ff;
}

/* Add media query for max-width 30rem to set flex-direction column */

Hint

Add aria-label="Box container" to the <section>. Use a media query for max-width 30rem to set flex-direction: column; on .container.

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