Flex direction control in Tailwind - Mini Project: Build & Apply

Flex Direction Control with Tailwind CSS

📖 Scenario: You are building a simple webpage section that displays three colored boxes. You want to control how these boxes are arranged using flexbox direction.

🎯 Goal: Create a flex container with three colored boxes inside. Use Tailwind CSS classes to control the flex direction so the boxes appear in a row or column as specified.

📋 What You'll Learn

Use a <section> element as the flex container

Add three <div> boxes inside the container with background colors red, green, and blue

Use Tailwind CSS classes to set the container as a flex container

Control the flex direction using Tailwind classes

Make sure the boxes have visible size and spacing

💡 Why This Matters

🌍 Real World

Flexbox is used everywhere in web design to arrange elements horizontally or vertically. Controlling flex direction helps create flexible layouts.

💼 Career

Knowing how to use Tailwind CSS flex utilities and control layout direction is a key skill for frontend developers building responsive websites.

1

Create the flex container and boxes

Create a <section> element with the class flex. Inside it, add three <div> elements with classes bg-red-500, bg-green-500, and bg-blue-500. Also add h-24 and w-24 classes to each box for size.

Tailwind

Need a hint?

Use the flex class on the <section> to make it a flex container. Add three <div> boxes with the exact background color and size classes.

2

Add a variable for flex direction

Create a variable called flexDirection and set it to the string flex-row.

Tailwind

  
  
  


// Create a variable called flexDirection and set it to 'flex-row'
// Your code here

Need a hint?

Use const flexDirection = 'flex-row'; to create the variable.

3

Apply the flex direction variable to the container

Add the variable flexDirection as a class to the <section> element so it controls the flex direction. Use template literals to combine the classes.

Tailwind

// Update the  element to include the flexDirection variable in its class attribute
// Your code here

Need a hint?

Use container.className = `flex ${flexDirection}`; to add the flex direction class dynamically.

4

Change flex direction to column

Change the value of the variable flexDirection to flex-col to make the boxes stack vertically.

Tailwind

// Change the flexDirection variable to 'flex-col'
// Your code here

Need a hint?

Simply set const flexDirection = 'flex-col'; to stack boxes vertically.