Flex basis and sizing in Tailwind - Mini Project: Build & Apply

Flex Basis and Sizing with Tailwind CSS

📖 Scenario: You are creating a simple responsive card layout for a website. Each card should have a fixed base size but also be flexible to grow or shrink depending on the screen size.

🎯 Goal: Build a row of three cards using Tailwind CSS. Each card should have a flex basis of 1/3 of the container width and be able to grow or shrink as needed.

📋 What You'll Learn

Use a flex container to hold the cards

Set the flex basis of each card to one-third of the container width using Tailwind classes

Allow the cards to grow and shrink with flex-grow and flex-shrink

Add simple styling so cards are visible with background color and padding

Ensure the layout is responsive and cards adjust on smaller screens

💡 Why This Matters

🌍 Real World

Flexbox layouts are common in web design to create flexible, responsive interfaces that adjust to different screen sizes.

💼 Career

Understanding flex basis and sizing with Tailwind CSS is important for front-end developers building modern, responsive websites quickly and efficiently.

1

Create the HTML structure with a flex container and three cards

Write the HTML code to create a <div> with class flex as the container. Inside it, add three <div> elements each with the class card. This sets up the basic structure for the cards.

Tailwind

Need a hint?

Use a <div> with class flex for the container. Then add three child <div> elements with class card.

2

Add Tailwind classes to set flex basis to one-third for each card

Add the Tailwind class basis-1/3 to each card div to set their flex basis to one-third of the container width.

Tailwind

  Card 1
  Card 2
  Card 3
  

Need a hint?

Use the Tailwind class basis-1/3 on each card to set their base size to one-third of the container.

3

Allow cards to grow and shrink with flex-grow and flex-shrink classes

Add the Tailwind classes grow and shrink to each card div so they can grow and shrink as needed inside the flex container.

Tailwind

  Card 1
  Card 2
  Card 3
  

Need a hint?

Add grow and shrink classes to each card so they can resize flexibly.

4

Add background color and padding for visibility and responsiveness

Add Tailwind classes bg-blue-200 and p-4 to each card div to give them a light blue background and padding. Also add flex-wrap to the container so cards wrap on smaller screens.

Tailwind

  Card 1
  Card 2
  Card 3
  

Need a hint?

Add bg-blue-200 and p-4 to each card for color and spacing. Add flex-wrap to the container so cards wrap on small screens.