Justify content (main axis) in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does justify-content control in a flex container?

It controls how items are spaced along the main axis (horizontal by default) inside a flex container.

beginner

Which Tailwind CSS class aligns items to the start of the main axis?

The class justify-start aligns items to the start (left in a row) of the main axis.

beginner

What is the effect of justify-center in Tailwind CSS?

It centers all flex items along the main axis, so they appear grouped in the middle horizontally (for row direction).

intermediate

How does justify-between space items in a flex container?

It places the first item at the start, the last item at the end, and evenly spaces the items between them.

intermediate

Name the Tailwind class that evenly spaces items with equal space around them.

The class justify-around adds equal space around each item along the main axis.

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

A justify-end

B justify-center

C justify-start

D justify-between

justify-end moves items to the end of the main axis (right side in a row).

What does justify-between do in a flex container?

A Centers all items

B Spaces items evenly with equal space around each

C Places first and last items at edges with equal space between items

D Aligns all items to the start

justify-between puts first and last items at container edges and spaces others evenly between.

If you want equal space around each flex item, which Tailwind class do you use?

A justify-around

B justify-center

C justify-start

D justify-end

justify-around adds equal space around each item along the main axis.

What is the default main axis direction in a flex container?

A Vertical (column)

B Horizontal (row)

C Diagonal

D No direction

By default, flex containers arrange items in a horizontal row, which is the main axis.

Which Tailwind class would you use to align items at the start of the main axis?

A justify-center

B justify-end

C justify-between

D justify-start

justify-start aligns items to the start (left side in a row) of the main axis.

Explain how the justify-content property affects layout in a flex container and how Tailwind CSS classes map to it.

Think about how items line up horizontally in a row.

Describe a real-life scenario where you would use justify-between in a navigation bar.

Imagine menu items spread across the top of a website.