Flex grow and shrink in Tailwind - Mini Project: Build & Apply

Flex Grow and Shrink with Tailwind CSS

📖 Scenario: You are creating a simple responsive card layout for a website. The cards should adjust their size inside a flex container depending on available space. You will use Tailwind CSS flex grow and shrink utilities to control how the cards expand or shrink.

🎯 Goal: Build a flex container with three cards. Use Tailwind CSS classes to make the first card grow to fill extra space, the second card stay fixed size, and the third card shrink if needed.

📋 What You'll Learn

Create a flex container using Tailwind CSS

Add three child div cards inside the container

Use flex-grow and flex-shrink Tailwind classes to control card resizing

Make the first card grow to fill extra space

Make the second card fixed size (no grow or shrink)

Make the third card shrink if space is limited

💡 Why This Matters

🌍 Real World

Flex grow and shrink are used in responsive web layouts to control how elements resize when the browser window changes size.

💼 Career

Understanding flex grow and shrink is essential for front-end developers to build flexible, user-friendly interfaces that adapt to different devices.

1

Create the flex container and three cards

Create a <div> with Tailwind classes flex and border to act as the container. Inside it, add three child <div> elements with Tailwind classes border, p-4, and text content exactly Card 1, Card 2, and Card 3 respectively.

Tailwind

Need a hint?

Use flex on the container to arrange children horizontally. Add borders and padding to cards for visibility.

2

Make the second card fixed size

Add the Tailwind classes w-32 and flex-shrink-0 to the second card's <div> to fix its width to 8rem (128px) and prevent shrinking.

Tailwind

  Card 1
  Card 2 
  Card 3

Need a hint?

Use w-32 and flex-shrink-0 to set a fixed width that doesn't shrink on the second card.

3

Make the first card grow to fill extra space

Add the Tailwind class flex-grow to the first card's <div> so it expands to fill available space in the container.

Tailwind

  Card 1 
  Card 2
  Card 3

Need a hint?

Use flex-grow on the first card to let it expand.

4

Make the third card shrink if needed

Add the Tailwind class flex-shrink to the third card's <div> so it can shrink when the container is too small.

Tailwind

  Card 1
  Card 2
  Card 3 

Need a hint?

Use flex-shrink on the third card to allow it to shrink.