Flex wrap behavior in Tailwind - Mini Project: Build & Apply

Flex Wrap Behavior with Tailwind CSS

📖 Scenario: You are creating a responsive product list for a small online store. The products should wrap onto new lines when the screen is narrow, so they look neat and organized.

🎯 Goal: Build a simple webpage using Tailwind CSS that displays a row of product boxes. The boxes should wrap to the next line when they don't fit in one row.

📋 What You'll Learn

Use a flex container with Tailwind CSS

Apply the flex-wrap utility to allow wrapping

Create exactly 5 product boxes with fixed width and height

Use semantic HTML and accessible labels

Make sure the layout is responsive and wraps on smaller screens

💡 Why This Matters

🌍 Real World

Online stores and portfolios often need flexible layouts that adapt to screen size. Using flex-wrap helps keep items organized and readable on all devices.

💼 Career

Understanding flexbox and responsive design with Tailwind CSS is essential for frontend developers building modern, accessible websites.

1

Create the HTML structure with product boxes

Create a <div> with class flex and inside it add 5 <div> elements each with class w-40 h-40 bg-blue-300 m-2. Each product box should contain the text Product 1, Product 2, up to Product 5 respectively.

Tailwind

Need a hint?

Use a <div> with class flex to create a flex container. Then add 5 child <div> elements with fixed width and height using Tailwind classes.

2

Add the flex-wrap utility

Add the Tailwind CSS class flex-wrap to the existing flex container <div class="flex"> so it becomes <div class="flex flex-wrap">.

Tailwind

  
  Product 1
  Product 2
  Product 3
  Product 4
  Product 5

Need a hint?

Simply add the flex-wrap class next to flex in the container's class attribute.

3

Add a heading and semantic container

Wrap the flex container inside a <main> element and add a heading <h1> with the text Product List above the flex container.

Tailwind

  
  
    Product 1
    Product 2
    Product 3
    Product 4
    Product 5
  

Need a hint?

Use a <main> tag to wrap the content and add a heading with Tailwind classes for size and spacing.

4

Make the product boxes accessible

Add role="list" to the flex container <div class="flex flex-wrap"> and add role="listitem" to each product box <div> inside it.

Tailwind

  Product List
  
    
    Product 1
    Product 2
    Product 3
    Product 4
    Product 5
  

Need a hint?

Use ARIA roles role="list" on the container and role="listitem" on each child for better accessibility.