Flex direction control in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the <code>flex-row</code> class do in Tailwind CSS?

It sets the flex container's main axis to horizontal, arranging child elements side by side from left to right.

beginner

How does flex-col affect the layout of flex items?

It changes the flex direction to vertical, stacking child elements from top to bottom.

intermediate

What is the difference between flex-row-reverse and flex-col-reverse?

flex-row-reverse arranges items horizontally but in reverse order (right to left). <br>flex-col-reverse stacks items vertically but from bottom to top.

beginner

Why is controlling flex direction important in responsive design?

It lets you change how items are arranged on different screen sizes, making layouts adapt nicely for phones, tablets, and desktops.

beginner

Which Tailwind class would you use to stack items vertically but reverse their order?

Use flex-col-reverse to stack items vertically from bottom to top.

Which Tailwind class arranges flex items horizontally from left to right?

A flex-col-reverse

B flex-col

C flex-row-reverse

D flex-row

flex-row sets the flex direction horizontally in normal order.

What does flex-col do to flex items?

A Stacks items vertically from top to bottom

B Stacks items vertically from bottom to top

C Arranges items horizontally from right to left

D Arranges items horizontally from left to right

flex-col stacks items vertically in normal order.

If you want items to appear horizontally but in reverse order, which class do you use?

A flex-col

B flex-row-reverse

C flex-col-reverse

D flex-row

flex-row-reverse arranges items horizontally but reversed.

Which flex direction stacks items vertically from bottom to top?

A flex-col-reverse

B flex-row

C flex-row-reverse

D flex-col

flex-col-reverse stacks items vertically but reversed.

Why is changing flex direction useful in web design?

A To add animations

B To change colors of items

C To control item arrangement for different screen sizes

D To increase font size

Changing flex direction helps layouts adapt to different screen sizes.

Explain how flex-row and flex-col differ in arranging items.

Think about rows vs columns in a table.

Describe a scenario where using flex-col-reverse would be helpful in a responsive design.

Consider how order matters on small devices.