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.

Practice

1. What does the order utility in Tailwind CSS do?

easy

A. Changes the visual position of an item without changing the HTML order

B. Changes the font size of an element

C. Adds margin around an element

D. Changes the background color of an element

Solution

1. Step 1: Understand the purpose of order

   The order utility changes the visual order of flex items without changing their order in the HTML code.

2. Step 2: Compare with other options

   Options A, C, and D describe unrelated CSS properties like font size, margin, and background color, which are not related to order.

3. Final Answer:

   Changes the visual position of an item without changing the HTML order -> Option A

4. Quick Check:

   Order changes visual position only [OK]

Hint: Order changes visual position, not HTML structure [OK]

Common Mistakes:

• Confusing order with margin or padding
• Thinking order changes HTML code
• Mixing order with color or font utilities

2. Which Tailwind class correctly sets an item to appear first in a flex container?

easy

A. order-last

B. order-1

C. order-first

D. order-0

Solution

1. Step 1: Identify the class for first order

   In Tailwind, order-first sets the item to appear before all others visually.

2. Step 2: Understand other options

   order-last places the item last, order-1 and order-0 set numeric order but order-first is the special class for first position.

3. Final Answer:

   order-first -> Option C

4. Quick Check:

   Use order-first to appear first [OK]

Hint: order-first always places item visually first [OK]

Common Mistakes:

• Using order-1 instead of order-first for first position
• Confusing order-last with order-first
• Assuming order-0 is always first

3. Given this HTML and Tailwind CSS:

<div class="flex">
  <div class="order-2">A</div>
  <div class="order-1">B</div>
  <div class="order-3">C</div>
</div>

What is the visual order of the items displayed in the browser?

medium

A. A B C

B. B A C

C. C B A

D. B C A

Solution

1. Step 1: Understand the order values

   Items have order values: A=2, B=1, C=3. Lower order values appear first visually.

2. Step 2: Arrange items by order

   Order 1 (B) appears first, then order 2 (A), then order 3 (C). So visual order is B A C.

3. Final Answer:

   B A C -> Option B

4. Quick Check:

   Lower order value appears first [OK]

Hint: Lower order number means earlier visual position [OK]

Common Mistakes:

• Assuming HTML order is visual order
• Mixing up order numbers
• Ignoring that order affects only visual placement

4. You want to align one flex item to the end vertically inside a flex container. Which Tailwind class should you add to that item?

medium

A. self-start

B. self-center

C. items-end

D. self-end

Solution

1. Step 1: Understand self-alignment classes

   self-end aligns the single item to the end of the cross axis (vertical in a row flex container).

2. Step 2: Differentiate from container alignment

   items-end aligns all items, but self-end targets only one item.

3. Final Answer:

   self-end -> Option D

4. Quick Check:

   Use self-end for single item vertical end alignment [OK]

Hint: self-end aligns one item at container's end vertically [OK]

Common Mistakes:

• Using items-end to align only one item
• Confusing self-start with self-end
• Not understanding self- vs items- prefixes

5. You have a flex container with three items. You want the second item to appear last visually but keep its vertical alignment centered, while the others align to the start vertically. Which Tailwind classes should you apply to the second item?

hard

A. order-last self-center

B. order-last items-start

C. order-3 self-start

D. order-3 items-center

Solution

1. Step 1: Set visual order to last

   Use order-last to make the second item appear last visually.

2. Step 2: Align only the second item vertically centered

   Use self-center to align that item vertically center without affecting others.

3. Step 3: Confirm other options

   items-start and items-center affect all items, not just one. order-3 is numeric but order-last is clearer for last position.

4. Final Answer:

   order-last self-center -> Option A

5. Quick Check:

   order-last + self-center for last and centered item [OK]

Hint: Combine order-last with self-center for last and centered item [OK]

Common Mistakes:

• Using items-start or items-center instead of self- classes
• Using numeric order instead of order-last
• Aligning all items instead of just one