Justify content in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does justify-content: space-between; do in a flex container?

Imagine you have a row of boxes inside a container. What happens when you use justify-content: space-between; on the container?

A The boxes are spread out with equal space before the first and after the last box.

B The boxes are packed at the start with no space between them.

C The boxes are spread out so the first is at the start, the last is at the end, and equal space is between each box.

D The boxes are all grouped at the center with equal space around them.

💡 Hint

Think about how the space is distributed between and around the boxes.

space-between places the first item at the start and the last at the end of the container. The space between items is equal, but no extra space is added before the first or after the last item.

📝 Syntax

intermediate

Which CSS snippet correctly centers flex items horizontally?

You want to center all items inside a flex container horizontally. Which code snippet does this correctly?

CSS

display: flex;
/* missing justify-content */

A justify-content: flex-start;

B justify-content: center;

C justify-content: space-around;

D justify-content: stretch;

💡 Hint

Centering means items are grouped in the middle with equal space on both sides.

justify-content: center; aligns flex items in the center of the container horizontally.

❓ rendering

advanced

What is the visual result of justify-content: space-evenly; in a flex container?

You have five boxes in a row inside a flex container with justify-content: space-evenly;. What will you see?

CSS

display: flex;
justify-content: space-evenly;

A Boxes have equal space between them and also equal space before the first and after the last box.

B Boxes are packed tightly at the start with no space between them.

C Boxes have equal space only between them but no space at the edges.

D Boxes are centered with extra space only on the right side.

💡 Hint

Think about how space is shared inside the container including edges.

space-evenly distributes equal space between all items and also before the first and after the last item, making spacing uniform everywhere.

❓ selector

advanced

Which CSS selector targets only flex containers with justify-content: center;?

You want to style only flex containers that have justify-content: center;. Which selector works?

A div.flex-container[style*='justify-content: center']

B .flex-container.justify-content-center

C div.flex-container > *:first-child

D div.flex-container:has([style*='justify-content: center'])

💡 Hint

Look for a selector that matches inline styles containing the text.

Option A uses an attribute selector to find elements with inline styles containing justify-content: center. Other options either look for classes or child elements, not inline styles.

❓ accessibility

expert

How does justify-content affect keyboard navigation in a flex container?

Consider a horizontal flex container with several focusable buttons. How does changing justify-content impact keyboard users navigating with Tab key?

A It reverses the tab order when set to <code>flex-end</code>.

B It changes the tab order to match the visual order of items on screen.

C It disables keyboard navigation if set to <code>space-between</code>.

D It does not affect the tab order; keyboard navigation follows the DOM order regardless of visual layout.

💡 Hint

Think about how keyboard focus moves through elements in HTML.

justify-content only changes visual layout. Keyboard navigation with Tab follows the order of elements in the HTML code, not their visual position.