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

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

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

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

Hint

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

Practice

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

easy

A. The direction in which flex items are laid out (row or column)

B. The color of flex items

C. The size of the flex container

D. The font style of flex items

Solution

1. Step 1: Understand the role of flex-direction

   The flex-direction property sets the main axis direction for flex items inside a flex container.

2. Step 2: Identify what flex-direction affects

   It controls whether items are laid out in a row (horizontally) or column (vertically), and if the order is normal or reversed.

3. Final Answer:

   The direction in which flex items are laid out (row or column) -> Option A

4. Quick Check:

   flex-direction controls layout direction [OK]

Hint: Remember: flex-direction sets row or column layout [OK]

Common Mistakes:

• Confusing flex-direction with color or size properties
• Thinking flex-direction changes container size
• Assuming flex-direction affects font styles

2. Which of the following is the correct syntax to set flex items in a column direction?

easy

A. display: flex; flex-direction: row-column;

B. display: flex; direction: column;

C. display: block; flex-direction: column;

D. display: flex; flex-direction: column;

Solution

1. Step 1: Check the container display property

   Flexbox requires display: flex; on the container to work.

2. Step 2: Verify the flex-direction syntax

   The correct property is flex-direction with values like row or column. The value column is valid.

3. Final Answer:

   display: flex; flex-direction: column; -> Option D

4. Quick Check:

   Use display flex + flex-direction column [OK]

Hint: Always use display:flex before flex-direction [OK]

Common Mistakes:

• Using invalid values like 'row-column'
• Forgetting display:flex on container
• Using 'direction' instead of 'flex-direction'

3. Given this CSS:

div.container {
  display: flex;
  flex-direction: row-reverse;
}

What will be the order of flex items inside div.container?

medium

A. Items will be stacked vertically in normal order

B. Items will be laid out from left to right in normal order

C. Items will be laid out from right to left in reverse order

D. Items will be stacked vertically in reverse order

Solution

1. Step 1: Identify flex-direction value

   The value row-reverse means items are placed in a row but in reverse order, starting from the right.

2. Step 2: Understand layout direction

   Flex items will appear horizontally but reversed, so the last item appears first on the right side.

3. Final Answer:

   Items will be laid out from right to left in reverse order -> Option C

4. Quick Check:

   row-reverse means horizontal reversed layout [OK]

Hint: row-reverse flips horizontal order right to left [OK]

Common Mistakes:

• Confusing row-reverse with column direction
• Assuming normal left-to-right order
• Thinking items stack vertically

4. This CSS code does not change the layout direction as expected. What is the error?

.box {
  flex-direction: column;
}

medium

A. Missing display: flex; on the container

B. Incorrect property name, should be flex-direction-row

C. Value column is invalid

D. Flex-direction only works on inline elements

Solution

1. Step 1: Check if flex container is set

   The property flex-direction only works if the container has display: flex;.

2. Step 2: Identify missing display property

   The code does not include display: flex;, so the layout direction won't change.

3. Final Answer:

   Missing display: flex; on the container -> Option A

4. Quick Check:

   flex-direction needs display:flex [OK]

Hint: Always set display:flex before flex-direction [OK]

Common Mistakes:

• Forgetting to set display:flex
• Using wrong property names
• Thinking flex-direction works on inline elements

5. You want a flex container to display items vertically but with the last item shown at the top. Which CSS flex-direction value should you use?

hard

A. column

B. column-reverse

C. row-reverse

D. row

Solution

1. Step 1: Understand vertical layout

   To display items vertically, use column or column-reverse.

2. Step 2: Reverse order with last item on top

   The column-reverse value stacks items vertically but reverses their order, so the last item appears at the top.

3. Final Answer:

   column-reverse -> Option B

4. Quick Check:

   column-reverse stacks vertically reversed [OK]

Hint: Use column-reverse for vertical reversed order [OK]

Common Mistakes:

• Choosing row-reverse which is horizontal
• Using column without reverse order
• Confusing row and column directions