Justify content (main axis) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the visual result of justify-center in Tailwind CSS?

You have a flex container with three boxes inside. The container uses flex and justify-center. Where will the boxes appear horizontally inside the container?

Tailwind

<div class="flex justify-center bg-gray-100 h-24">
  <div class="w-12 h-12 bg-blue-500"></div>
  <div class="w-12 h-12 bg-red-500"></div>
  <div class="w-12 h-12 bg-green-500"></div>
</div>

A The three boxes are grouped together in the center horizontally with equal space on left and right.

B The three boxes are spaced evenly with equal space between each box and edges.

C The three boxes are aligned to the left side with no extra space on the right.

D The three boxes are aligned to the right side with no extra space on the left.

💡 Hint

Think about how justify-content works on the main axis in flexbox.

The justify-center class centers all flex items horizontally inside the container. This means the group of boxes is placed in the middle with equal space on both sides.

❓ layout

intermediate

Which Tailwind class spaces flex items evenly with equal space around each item?

You want to create a flex container where the items have equal space before the first item, between items, and after the last item. Which justify-* class do you use?

Tailwind

<div class="flex justify-??? bg-gray-100 h-24">
  <div class="w-12 h-12 bg-purple-500"></div>
  <div class="w-12 h-12 bg-yellow-500"></div>
  <div class="w-12 h-12 bg-pink-500"></div>
</div>

A justify-around

B justify-between

C justify-center

D justify-start

💡 Hint

Remember, justify-around adds equal space around each item, including edges.

justify-around distributes space evenly around each flex item, so the space before the first item and after the last item is half the space between items, creating equal spacing around all items.

❓ selector

advanced

Which Tailwind class aligns flex items to the end of the main axis?

You want all flex items to be pushed to the right side of a horizontal flex container. Which justify-* class achieves this?

Tailwind

<div class="flex justify-??? bg-gray-100 h-24">
  <div class="w-12 h-12 bg-red-400"></div>
  <div class="w-12 h-12 bg-green-400"></div>
  <div class="w-12 h-12 bg-blue-400"></div>
</div>

A justify-between

B justify-end

C justify-center

D justify-start

💡 Hint

Think about which side is the 'end' in a left-to-right flex container.

justify-end pushes all flex items to the end of the main axis, which is the right side in a horizontal flex container.

🧠 Conceptual

advanced

What happens if you use justify-between with only one flex item?

You have a flex container with a single item inside. The container uses flex and justify-between. How will the single item be positioned horizontally?

Tailwind

<div class="flex justify-between bg-gray-100 h-24">
  <div class="w-12 h-12 bg-indigo-500"></div>
</div>

A The single item is centered horizontally.

B The single item is placed at the end (right) of the container.

C The single item stretches to fill the container width.

D The single item is placed at the start (left) of the container.

💡 Hint

Consider how justify-between distributes space between multiple items.

justify-between places space between items. With only one item, there is no space between, so the item stays at the start (left) by default.

❓ accessibility

expert

How does using justify-center affect keyboard navigation and screen reader users?

You have a flex container with buttons aligned using justify-center. What should you consider to ensure good accessibility?

Tailwind

<nav class="flex justify-center bg-gray-50 p-4" role="navigation" aria-label="Main menu">
  <button class="mx-2">Home</button>
  <button class="mx-2">About</button>
  <button class="mx-2">Contact</button>
</nav>

A Screen readers will ignore buttons because they are centered; keyboard navigation is disabled.

B Keyboard users will be trapped in the center; screen readers will read buttons in visual order only.

C Keyboard users can tab through buttons in order; screen readers read buttons in DOM order regardless of visual alignment.

D Buttons must have extra ARIA roles to be accessible when centered.

💡 Hint

Think about how visual layout affects DOM order and accessibility.

Using justify-center only changes visual alignment. Keyboard navigation and screen readers follow the DOM order, so accessibility is preserved if the DOM order is logical.

Practice

1. What does the Tailwind class justify-center do in a flex container?

easy

A. Centers items horizontally along the main axis

B. Aligns items to the start vertically

C. Distributes items evenly with space around

D. Stacks items vertically in a column

Solution

1. Step 1: Understand the main axis in flexbox

   The main axis is horizontal by default in a flex container with flex-row.

2. Step 2: Effect of justify-center

   This class centers all flex items horizontally along the main axis.

3. Final Answer:

   Centers items horizontally along the main axis -> Option A

4. Quick Check:

   justify-center = center horizontally [OK]

Hint: Justify content controls horizontal alignment in flex row [OK]

Common Mistakes:

• Confusing justify with align items
• Thinking justify-center aligns vertically
• Mixing justify-between with justify-center

2. Which Tailwind class correctly justifies items to have equal space between them horizontally?

easy

A. justify-around

B. justify-end

C. justify-center

D. justify-between

Solution

1. Step 1: Recall the meaning of justify-between

   The class justify-between places equal space between items, but no space at the ends.

2. Step 2: Compare with other options

   justify-around adds space around items, justify-center centers them, and justify-end aligns to the right.

3. Final Answer:

   justify-between -> Option D

4. Quick Check:

   Equal space between items = justify-between [OK]

Hint: Between means space only between items, not edges [OK]

Common Mistakes:

• Choosing justify-around instead of justify-between
• Confusing justify-end with justify-between
• Using justify-center for spacing

3. Given this HTML snippet:

<div class="flex justify-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Where will the items appear inside the container?

medium

A. Items aligned to the right side

B. Items aligned to the left side

C. Items centered horizontally

D. Items spaced evenly with gaps

Solution

1. Step 1: Identify the flex container and class

   The container uses flex and justify-end, so it is a flex row with items justified to the end.

2. Step 2: Understand justify-end effect

   justify-end pushes all items to the right side (end) of the container horizontally.

3. Final Answer:

   Items aligned to the right side -> Option A

4. Quick Check:

   justify-end = right align items [OK]

Hint: End means right side in flex row by default [OK]

Common Mistakes:

• Thinking justify-end centers items
• Confusing justify-end with justify-start
• Assuming justify-end spaces items evenly

4. This code snippet does not space items as expected:

<div class="flex justify-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

What is the likely mistake?

medium

A. Missing flex-row class

B. Using justify-center instead of justify-between

C. Items need inline-block class

D. Should use justify-end for spacing

Solution

1. Step 1: Analyze the class used

   The container uses justify-center, which centers items but does not add space between them.

2. Step 2: Correct class for spacing

   To add equal space between items, justify-between should be used instead.

3. Final Answer:

   Using justify-center instead of justify-between -> Option B

4. Quick Check:

   Centering ≠ spacing between items [OK]

Hint: Use justify-between for spacing, not justify-center [OK]

Common Mistakes:

• Confusing justify-center with justify-between
• Adding unnecessary classes like inline-block
• Thinking flex-row is missing when flex defaults to row

5. You want a navigation bar with 4 links spaced evenly across the width, but with extra space at the edges. Which Tailwind class should you use on the flex container?

hard

A. justify-center

B. justify-between

C. justify-around

D. justify-start

Solution

1. Step 1: Understand spacing requirements

   The requirement is equal spacing between items and extra space at the container edges.

2. Step 2: Match with Tailwind classes

   justify-around adds equal space around each item, including edges, unlike justify-between which has no edge space.

3. Final Answer:

   justify-around -> Option C

4. Quick Check:

   Space around items and edges = justify-around [OK]

Hint: Around means space on edges and between items [OK]

Common Mistakes:

• Choosing justify-between which lacks edge space
• Using justify-center which centers items only
• Assuming justify-start spaces items evenly