Flex basis and sizing in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does flex-basis control in a flex container?

flex-basis sets the initial main size of a flex item before free space is distributed. It defines the starting width or height depending on flex direction.

beginner

How do you set flex-basis to 50% using Tailwind CSS?

Use the class basis-1/2 to set flex-basis to 50% of the parent's size.

intermediate

What is the difference between flex-grow and flex-basis?

flex-basis sets the starting size of a flex item.<br>flex-grow controls how much the item can grow to fill extra space.

beginner

Which Tailwind class sets <code>flex-basis</code> to <code>auto</code>?

The class basis-auto sets flex-basis to auto, meaning the item sizes based on its content.

intermediate

If you want a flex item to never shrink smaller than 100px, which Tailwind class helps with sizing?

Use min-w-[100px] to set a minimum width of 100 pixels, preventing the item from shrinking below that size.

Which Tailwind class sets flex-basis to 25%?

A basis-1/4

B basis-1/2

C basis-1/3

D basis-auto

basis-1/4 sets flex-basis to 25% (one quarter) of the container size.

What does basis-auto do in Tailwind CSS?

A Sets flex-basis to auto, sizing by content

B Sets flex-basis to 0

C Sets flex-grow to 1

D Sets flex-shrink to 0

basis-auto means the flex item sizes itself based on its content.

If a flex item has basis-1/2 and grow, what happens when extra space is available?

A It stays at 50% width

B It shrinks below 50%

C It grows larger than 50%

D It disappears

basis-1/2 sets initial size to 50%, and grow allows it to expand beyond that if space is free.

Which property controls the minimum size a flex item can shrink to?

A flex-basis

B min-width or min-height

C flex-grow

D flex-shrink

Minimum size is controlled by min-width or min-height, which can be set in Tailwind with classes like min-w-[value].

What is the default value of flex-basis if not set?

A 0

B 100%

C none

D auto

The default flex-basis is auto, meaning the item sizes based on its content or width/height.

Explain how flex-basis works in a flex container and how Tailwind CSS helps set it.

Think about the starting size of a flex item before it grows or shrinks.

Describe how you can control the minimum size of a flex item using Tailwind CSS.

Minimum size is not flex-basis but a separate CSS property.