Justify content in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property justify-content do?

justify-content controls how items are spaced along the main axis in a flex or grid container. It helps align items horizontally or vertically depending on the layout direction.

beginner

Name three common values for justify-content and what they do.

• flex-start: Items align at the start of the container.
• center: Items are centered in the container.
• space-between: Items spread out with equal space between them.

intermediate

How does justify-content behave differently in a flex container with flex-direction: row versus flex-direction: column?

In row direction, justify-content aligns items horizontally. In column direction, it aligns items vertically along the container's main axis.

intermediate

What is the difference between space-between and space-around in justify-content?

space-between puts equal space between items but no space at the container edges. space-around adds equal space around all items, so edges have half the space compared to between items.

beginner

Why is justify-content important for responsive design?

It helps control how items adjust their spacing inside flexible containers on different screen sizes, making layouts look balanced and neat on phones, tablets, and desktops.

Which justify-content value aligns items to the center of the container?

A flex-end

B flex-start

C center

D space-between

center places items in the middle of the container along the main axis.

What does justify-content: space-between; do?

A Adds equal space around all items including edges

B Aligns items at the end of the container

C Aligns items at the start of the container

D Distributes items with equal space between them but no space at edges

space-between puts equal space between items but no extra space at container edges.

If a flex container has flex-direction: column;, how does justify-content behave?

A Aligns items vertically along the container's main axis

B Aligns items horizontally

C Has no effect

D Aligns items diagonally

With column direction, the main axis is vertical, so justify-content aligns items vertically.

Which justify-content value places all items at the end of the container?

A flex-start

B flex-end

C center

D space-around

flex-end aligns items to the end of the main axis inside the container.

Why should you use justify-content in a flexbox layout?

A To control spacing and alignment of items along the main axis

B To change the font size of items

C To add borders around items

D To change the background color

justify-content controls how items are spaced and aligned along the main axis in flexbox or grid containers.

Explain how the justify-content property affects the layout of items in a flex container.

Think about how items line up horizontally or vertically depending on flex direction.

Describe the difference between space-between and space-around values in justify-content.

Imagine placing chairs in a row with or without space at the ends.