Flex container activation in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does activating a flex container do in CSS layout?

Activating a flex container changes the layout of its child elements to flexbox, allowing them to be arranged in rows or columns with flexible sizing and alignment.

beginner

Which Tailwind CSS class activates a flex container?

The <code>flex</code> class activates a flex container in Tailwind CSS.

beginner

How do you change the direction of flex items in Tailwind CSS?

Use flex-row for horizontal layout or flex-col for vertical layout after activating the flex container with flex.

intermediate

Why is it important to activate a flex container before using flex item properties?

Flex item properties only work inside a flex container. Without activating the container, these properties have no effect.

beginner

What is the default flex direction when you activate a flex container with Tailwind's flex class?

The default flex direction is row, meaning items are laid out horizontally from left to right.

Which Tailwind class activates a flex container?

A flex

B block

C grid

D inline

The flex class activates a flex container, enabling flexbox layout.

What is the default direction of flex items when using Tailwind's flex class?

A column

B row

C reverse column

D reverse row

The default flex direction is row, so items line up horizontally.

Which class changes flex direction to vertical in Tailwind?

A flex-col

B flex-row

C flex-wrap

D flex-grow

flex-col changes the flex direction to column (vertical).

What happens if you apply flex item properties without activating a flex container?

A They work normally

B They cause errors

C They convert the container to flex automatically

D They have no effect

Flex item properties only work inside a flex container; otherwise, they do nothing.

Which Tailwind class would you use to activate a flex container and arrange items horizontally?

A grid flex

B flex flex-col

C flex flex-row

D block flex-row

Use flex to activate and flex-row for horizontal layout.

Explain how to activate a flex container in Tailwind CSS and how to change the direction of its items.

Think about the classes that start with 'flex' and how they control layout.

Why must you activate a flex container before using flex item properties? What happens if you don't?

Consider how CSS flexbox works under the hood.