Align content in CSS - Mini Project: Build & Apply

Align Content Using CSS Flexbox

📖 Scenario: You are creating a simple webpage section that displays multiple colored boxes inside a container. You want to control how these boxes are arranged and aligned inside the container using CSS Flexbox.

🎯 Goal: Build a webpage with a container holding six colored boxes. Use CSS Flexbox to align the boxes so they wrap onto multiple lines and the lines are spaced evenly in the container.

📋 What You'll Learn

Create a container with six child boxes

Use CSS Flexbox on the container

Set the container to wrap the boxes onto multiple lines

Use align-content property to space the wrapped lines evenly

Make sure the boxes have visible background colors and fixed size

💡 Why This Matters

🌍 Real World

Aligning multiple items in a container is common in web design for galleries, menus, or product listings where flexible and neat layouts improve user experience.

💼 Career

Understanding CSS Flexbox and align-content is essential for front-end developers to create responsive and visually appealing web pages.

1

Create the HTML structure with container and boxes

Create a <div> with class container. Inside it, create six <div> elements each with class box. Do not add any CSS yet.

CSS

Need a hint?

Use six <div> elements with class box inside the container.

2

Add basic CSS for container and boxes

Add CSS to set the container's width to 20rem and height to 12rem. Set each box's width and height to 4rem. Give each box a background color of lightcoral.

CSS

  
  
  
  
  
  



  /* Add container width and height */
  /* Add box width, height, and background color */

Need a hint?

Use CSS selectors .container and .box to style the elements.

3

Make the container a flex container and allow wrapping

Add CSS to the .container to make it a flex container by setting display: flex;. Also add flex-wrap: wrap; so the boxes wrap onto multiple lines when needed.

CSS

  
  
  
  
  
  



  .container {
    width: 20rem;
    height: 12rem;
    /* Make flex container and allow wrapping */
  }
  .box {
    width: 4rem;
    height: 4rem;
    background-color: lightcoral;
  }

Need a hint?

Use display: flex; and flex-wrap: wrap; inside .container.

4

Use align-content to space wrapped lines evenly

Add CSS to the .container to set align-content: space-evenly;. This will space the wrapped lines of boxes evenly inside the container's height.

CSS

  
  
  
  
  
  



  .container {
    width: 20rem;
    height: 12rem;
    display: flex;
    flex-wrap: wrap;
    /* Add align-content property here */
  }
  .box {
    width: 4rem;
    height: 4rem;
    background-color: lightcoral;
  }

Need a hint?

Use align-content: space-evenly; inside the .container CSS block.