Gap between flex children in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the gap utility in Tailwind CSS do when used with flex containers?

The gap utility adds consistent space between flex children without adding margin to individual items. It controls the space between items horizontally or vertically depending on flex direction.

beginner

How do you add a 1rem gap between flex children using Tailwind CSS?

Use the class gap-4 on the flex container. Tailwind's gap-4 corresponds to 1rem spacing between children.

intermediate

Why is using gap better than adding margin to flex children for spacing?

Using gap keeps spacing consistent and avoids extra margin on the container edges. It simplifies layout and prevents layout shifts caused by margins.

intermediate

Which CSS property does Tailwind's gap utility control under the hood?

It controls the CSS gap property, which works with flex and grid containers to set spacing between children.

advanced

Can gap be used with flex containers in all browsers?

Most modern browsers support gap with flex containers, but older browsers may not. Always check browser compatibility if supporting legacy browsers.

Which Tailwind class adds a 0.5rem gap between flex children?

A gap-2

B gap-4

C gap-1

D gap-3

gap-2 in Tailwind equals 0.5rem spacing.

What CSS property does Tailwind's gap utility modify?

A margin

B padding

C gap

D space-between

Tailwind's gap utility sets the CSS gap property.

Why is gap preferred over margins for spacing flex children?

A It avoids extra space on container edges

B It adds padding inside children

C It changes flex direction

D It removes flex wrapping

gap adds space only between items, not on container edges.

Which Tailwind class would you use to add a 2rem gap between flex children?

A gap-2

B gap-6

C gap-4

D gap-8

gap-8 corresponds to 2rem spacing in Tailwind.

Is the gap property supported in flexbox layouts in modern browsers?

A Only in Internet Explorer

B Yes, in most modern browsers

C No, only in grid layouts

D No, it is deprecated

gap works with flexbox in most modern browsers.

Explain how to add space between flex children using Tailwind CSS and why it is better than using margins.

Think about the CSS property that controls spacing between flex items.

Describe the relationship between Tailwind's gap classes and the CSS gap property in flexbox.

Consider how Tailwind utilities map to CSS properties.