Align items (cross axis) in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does items-center do in Tailwind CSS?

It aligns flex items to the center along the cross axis (vertical axis in a row flex container).

beginner

Which Tailwind class aligns items to the start of the cross axis?

items-start aligns flex items to the start (top in a row) of the cross axis.

beginner

How does items-end affect flex items?

It aligns flex items to the end (bottom in a row) of the cross axis.

intermediate

What is the difference between items-center and justify-center?

items-center centers items vertically (cross axis), while justify-center centers items horizontally (main axis) in a flex container.

intermediate

If a flex container has <code>flex-col</code>, which Tailwind class aligns items to the center horizontally?

Use items-center to align items horizontally center because the cross axis is horizontal in a column flex container.

In a flex container with flex-row, which Tailwind class aligns items at the bottom?

A justify-end

B items-center

C items-start

D items-end

items-end aligns items to the end of the cross axis, which is bottom in a row flex container.

What does items-baseline do in Tailwind CSS?

A Aligns items to the baseline of the text inside items

B Justifies items to the end

C Centers items horizontally

D Aligns items to the baseline of the container

items-baseline aligns flex items so their text baselines line up.

Which Tailwind class aligns items to the center along the cross axis?

A justify-center

B content-center

C items-center

D self-center

items-center aligns all flex items to the center on the cross axis.

If you want to align a single flex item differently from others, which Tailwind class do you use?

A self-start

B justify-center

C items-center

D content-start

self-start aligns a single flex item to the start of the cross axis, overriding the container's items-* setting.

In a flex container with flex-col, which axis is the cross axis?

A Vertical axis

B Horizontal axis

C Diagonal axis

D No cross axis

When flex direction is column, the cross axis is horizontal.

Explain how items-start, items-center, and items-end affect flex items along the cross axis.

Think about vertical alignment in a row flex container.

Describe the difference between items-center and justify-center in Tailwind flexbox.

Consider horizontal vs vertical alignment.