Flex grow and shrink in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does flex-grow do in a flex container?

flex-grow controls how much a flex item will grow relative to the other items when there is extra space in the container.

If set to 1, the item can grow to fill available space. If 0, it won't grow.

beginner

What is the effect of flex-shrink on a flex item?

flex-shrink controls how much a flex item will shrink relative to others when the container is too small.

If set to 1, the item can shrink. If 0, it will not shrink and may cause overflow.

beginner

How do you apply flex-grow and flex-shrink using Tailwind CSS classes?

Use grow for flex-grow: 1; and grow-0 for flex-grow: 0;.

Use shrink for flex-shrink: 1; and shrink-0 for flex-shrink: 0;.

beginner

What happens if all flex items have flex-grow: 1?

All items will grow equally to fill the available space in the flex container.

This means they share extra space evenly.

intermediate

Why might you set flex-shrink: 0 on a flex item?

To prevent the item from shrinking smaller than its content when the container is too small.

This helps keep important content visible and avoids unwanted squishing.

Which Tailwind class makes a flex item grow to fill extra space?

A grow

B shrink

C flex-none

D flex-auto

grow sets flex-grow: 1;, allowing the item to grow.

What does shrink-0 do in Tailwind CSS?

A Removes flex behavior

B Allows the item to shrink

C Makes the item grow

D Prevents the item from shrinking

shrink-0 sets flex-shrink: 0;, so the item will not shrink.

If a flex container has extra space and one item has flex-grow: 2 and another flex-grow: 1, what happens?

A Both grow equally

B The first item grows twice as much as the second

C Only the second item grows

D Neither item grows

Items grow proportionally to their flex-grow values.

Which Tailwind class prevents a flex item from growing?

A grow-0

B grow

C shrink

D flex-1

grow-0 sets flex-grow: 0;, so the item does not grow.

Why is controlling flex-shrink important in responsive design?

A To make items grow bigger on large screens

B To add margins

C To control how items shrink on small screens

D To change text color

flex-shrink controls how items reduce size when space is limited, important for small screens.

Explain how flex-grow and flex-shrink work together in a flex container.

Think about how items behave when the container is bigger or smaller than their total size.

Describe how you would use Tailwind classes to make one flex item grow and another not grow or shrink.

Remember the Tailwind classes for grow and shrink control.