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

Need a 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 */
}

Need a 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 */

Need a 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 */

Need a hint?

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