Flex direction in CSS - Mini Project: Build & Apply

Flex Direction with CSS Flexbox

📖 Scenario: You are creating a simple webpage section that displays three colored boxes side by side or stacked vertically depending on the flex direction.

🎯 Goal: Build a container with three boxes inside. Use CSS flexbox to arrange the boxes horizontally by default, then change the direction to vertical.

📋 What You'll Learn

Create a container element with three child boxes

Use CSS flexbox on the container

Set the flex direction to row initially

Change the flex direction to column in the final step

Use semantic HTML and accessible colors

💡 Why This Matters

🌍 Real World

Flexbox is widely used to create flexible and responsive layouts in websites and apps. Understanding flex direction helps arrange content horizontally or vertically easily.

💼 Career

Web developers use flexbox daily to build layouts that adapt to different screen sizes and devices, making this skill essential for frontend development jobs.

1

Create the HTML structure with a container and three boxes

Create a <section> element with the 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 classes box1, box2, and box3. Put the text 'Box 1', 'Box 2', and 'Box 3' inside each respectively.

2

Add basic CSS to style the container as a flexbox with row direction

Add CSS to select the class .container. Set display to flex and flex-direction to row. Also, add CSS for .box1, .box2, and .box3 to have a fixed width of 6rem, height of 6rem, and distinct background colors: #ff9999, #99ccff, and #99ff99 respectively.

CSS

  Box 1
  Box 2
  Box 3



  /* Add flex container styles and box styles here */

Need a hint?

Use display: flex; and flex-direction: row; on .container. Give each box a fixed size and distinct background color.

3

Change the flex direction to column

In the CSS for .container, change the flex-direction property value from row to column.

CSS

  .container {
    display: flex;
    /* Change flex-direction to column here */
  }

Need a hint?

Simply change flex-direction from row to column in the .container CSS rule.

4

Add responsive design to switch flex direction based on screen width

Add a CSS media query for screen widths less than 30rem. Inside it, set the .container flex direction back to row. This will make the boxes stack vertically on larger screens and line up horizontally on smaller screens.

CSS

  @media (max-width: 30rem) {
    /* Set .container flex-direction to row here */
  }

Need a hint?

Use a media query with @media (max-width: 30rem) and inside it set .container { flex-direction: row; }.