Order and self-alignment in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the order utility in Tailwind CSS do?

It changes the visual order of flex or grid items without changing the HTML structure. Lower numbers appear first, higher numbers appear later.

beginner

How do you make a flex item align itself to the end of the cross axis using Tailwind?

Use the self-end utility. It overrides the container's alignment for that specific item.

intermediate

What is the default order value for flex items in Tailwind CSS?

The default order is order-0, which corresponds to the CSS order value of 0.

intermediate

Explain the difference between items-center and self-center in Tailwind CSS.

items-center centers all flex items along the cross axis inside the container. self-center centers only the specific flex item it is applied to, overriding container alignment.

intermediate

Can you use order utilities on grid items in Tailwind CSS?

Yes. The order utilities work on both flex and grid items to control their visual order.

Which Tailwind class will move a flex item to appear first visually?

A order-first

B order-last

C order-3

D order-2

order-first sets the order to -9999, making the item appear first.

What does the self-start class do in Tailwind CSS?

A Aligns all items to the start

B Aligns the item to the start of the cross axis

C Changes the order of the item

D Centers the item horizontally

self-start aligns only the specific item to the start of the cross axis.

If you want a grid item to appear last visually, which Tailwind class should you use?

A items-end

B order-first

C order-last

D self-end

order-last sets a very high order value, making the item appear last.

Which property does the order utility control in CSS?

A The visual order of flex or grid items

B The alignment of items on the main axis

C The spacing between items

D The size of the items

order changes the visual order without changing the HTML.

What happens if you apply self-center to a flex item?

A It stretches the item to fill the container

B It centers all items in the container

C It changes the order of the item

D It centers that item along the cross axis

self-center centers only the specific item along the cross axis.

Describe how you can change the visual order of items in a flex container using Tailwind CSS.

Think about how order values affect item placement visually.

Explain the difference between container alignment and self-alignment in Tailwind CSS flexbox layouts.

Consider how one item can behave differently from the group.