Align items (cross axis) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to align items in the center on the cross axis using Tailwind CSS.

Tailwind

<div class="flex [1]">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-red-500 p-4">Box 2</div>
</div>

Drag options to blanks, or click blank then click option'

Aitems-center

Bitems-start

Citems-end

Djustify-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-center which aligns items on the main axis, not cross axis.

Using items-start or items-end which align items to top or bottom.

The class items-center aligns items in the center along the cross axis in a flex container.

2fill in blank

medium

Complete the code to align items at the start on the cross axis using Tailwind CSS.

Tailwind

<section class="flex [1] h-32 bg-gray-100">
  <div class="bg-green-400 p-4">Item A</div>
  <div class="bg-yellow-400 p-4">Item B</div>
</section>

Drag options to blanks, or click blank then click option'

Aitems-center

Bitems-start

Citems-end

Djustify-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-start which aligns items on the main axis.

Using items-end which aligns items at the bottom.

The class items-start aligns items at the start (top) of the cross axis in a flex container.

3fill in blank

hard

Fix the error in the code to align items at the end on the cross axis using Tailwind CSS.

Tailwind

<div class="flex [1] h-40 bg-gray-200">
  <div class="p-6 bg-purple-600 text-white">Box X</div>
  <div class="p-6 bg-pink-600 text-white">Box Y</div>
</div>

Drag options to blanks, or click blank then click option'

Aitems-center

Bitems-start

Cjustify-end

Ditems-end

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-end which aligns items on the main axis.

Using items-start or items-center which align items elsewhere.

The class items-end aligns items at the end (bottom) of the cross axis in a flex container.

4fill in blank

hard

Fill both blanks to align items at the center on the cross axis and justify content at the end on the main axis using Tailwind CSS.

Tailwind

<nav class="flex [1] [2] h-24 bg-indigo-100">
  <a href="#" class="p-4 bg-indigo-500 text-white">Home</a>
  <a href="#" class="p-4 bg-indigo-700 text-white">About</a>
</nav>

Drag options to blanks, or click blank then click option'

Aitems-center

Bjustify-end

Citems-start

Djustify-center

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up items- and justify- classes.

Using items-start instead of items-center.

items-center centers items on the cross axis, and justify-end moves content to the end on the main axis.

5fill in blank

hard

Fill all three blanks to create a flex container that aligns items at the end on the cross axis, justifies content at the center on the main axis, and has a fixed height of 48 using Tailwind CSS.

Tailwind

<header class="flex [1] [2] h-[3] bg-gray-300">
  <div class="p-5 bg-gray-700 text-white">Logo</div>
  <div class="p-5 bg-gray-900 text-white">Menu</div>
</header>

Drag options to blanks, or click blank then click option'

Aitems-end

Bjustify-center

C48

Ditems-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using items-center instead of items-end.

Using wrong height value or missing height class.

items-end aligns items at the bottom (cross axis), justify-center centers content horizontally (main axis), and h-48 sets height to 12rem.