Flex container in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the effect of justify-content: space-between; in a flex container?

Consider a flex container with three items inside. What visual effect does justify-content: space-between; produce on these items?

A Items are grouped at the start of the container with no space between them.

B Items are centered with equal space around each item including container edges.

C Items are evenly spaced with equal space between them, but no space at the container edges.

D Items are evenly spaced with equal space around them including container edges.

💡 Hint

Think about how space is distributed between items and container edges.

justify-content: space-between; places the first item at the start and the last item at the end of the container. The remaining items are spaced evenly between them, so there is no extra space at the container edges.

❓ selector

intermediate

Which CSS selector correctly targets only direct flex items inside a flex container?

Given a flex container with nested elements, which selector will select only the immediate flex items (children) but not deeper nested elements?

A .container > *

B .container *

C .container + *

D .container ~ *

💡 Hint

Look for the selector that selects only direct children.

The > combinator selects only direct children of the container. The * means all elements. So .container > * selects all direct children inside .container.

🧠 Conceptual

advanced

What happens if you set flex-wrap: nowrap; on a flex container with many items?

If a flex container has many items that cannot fit in one line, what is the visual result when flex-wrap: nowrap; is applied?

A Items are hidden if they don't fit inside the container.

B Items wrap onto multiple lines to fit inside the container.

C Items shrink vertically to fit inside the container height.

D All items stay on one line and may overflow the container horizontally.

💡 Hint

Consider what nowrap means for line breaking in flexbox.

flex-wrap: nowrap; forces all flex items to stay on a single line. If they don't fit, they overflow horizontally instead of wrapping to a new line.

❓ accessibility

advanced

How can you improve keyboard navigation for a flex container used as a toolbar?

You have a flex container acting as a toolbar with buttons. What is the best way to ensure keyboard users can navigate the buttons in order?

A Use <code>span</code> elements styled as buttons with click handlers.

B Use semantic <code>button</code> elements and ensure the flex container has <code>role="toolbar"</code>.

C Use <code>div</code> elements with <code>tabindex="0"</code> and no ARIA roles.

D Disable keyboard focus on buttons to prevent confusion.

💡 Hint

Think about semantic HTML and ARIA roles for toolbars.

Using native button elements ensures proper keyboard focus and behavior. Adding role="toolbar" on the flex container helps assistive technologies understand the group of controls.

📝 Syntax

expert

What is the computed width of each flex item with this CSS?

Given this CSS for a flex container and its items:

.container { display: flex; width: 600px; } .item { flex: 1 1 200px; }

There are 4 items inside. What is the width of each item in pixels?

A 150px each, because 600px divided equally among 4 items.

B 200px each, because the flex-basis is 200px and items don't shrink.

C 300px each, because items grow to fill container width.

D 100px each, because items shrink below flex-basis.

💡 Hint

Remember flex shorthand: flex-grow flex-shrink flex-basis. Items start at 200px but can shrink or grow.

Each item has flex: 1 1 200px; meaning they can grow and shrink equally starting from 200px. The container is 600px wide with 4 items. Total basis is 800px (4 × 200px), but container is smaller, so items shrink equally to 150px each (600 ÷ 4).

Practice

1. What does setting display: flex; on a container do?

easy

A. It hides the container and its children.

B. It makes the container's text bold.

C. It changes the container's background color.

D. It makes the container a flex container, arranging children in a row or column.

Solution

1. Step 1: Understand the role of display: flex;

   Setting display: flex; on a container activates flexbox layout for its children.

2. Step 2: Effect on child elements

   Children inside a flex container are arranged in a row by default or column if specified.

3. Final Answer:

   It makes the container a flex container, arranging children in a row or column. -> Option D

4. Quick Check:

   Flex container = display: flex [OK]

Hint: Remember: display: flex creates a flexible box container [OK]

Common Mistakes:

• Confusing flex container with hiding elements
• Thinking it changes colors or text styles
• Assuming it only affects text formatting

2. Which of the following is the correct CSS syntax to make a container a flex container?

easy

A. container { display: flex; }

B. container { display: block-flex; }

C. container { flex: display; }

D. container { flex-display: true; }

Solution

1. Step 1: Identify correct CSS property and value

   The correct property to enable flexbox is display with the value flex.

2. Step 2: Check syntax correctness

   container { display: flex; } uses correct CSS syntax: display: flex;. Others are invalid CSS.

3. Final Answer:

   container { display: flex; } -> Option A

4. Quick Check:

   Correct syntax = display: flex [OK]

Hint: Use 'display: flex;' exactly to start flexbox [OK]

Common Mistakes:

• Swapping property and value order
• Using non-existent properties like flex-display
• Adding extra words like 'true' or 'block-flex'

3. Given this CSS and HTML, what will be the layout of the boxes inside the container?

 .container { display: flex; } 
 .box { width: 50px; height: 50px; background: red; margin: 5px; } 

<div class='container'> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div>

medium

A. Boxes arranged horizontally in a row with space between them.

B. Boxes stacked vertically in a column.

C. Boxes overlapping each other in the same spot.

D. Boxes hidden because of missing display property.

Solution

1. Step 1: Analyze the container's display property

   The container has display: flex;, which arranges children in a row by default.

2. Step 2: Understand the boxes' layout

   Each box has fixed size and margin, so they appear side by side with space around them.

3. Final Answer:

   Boxes arranged horizontally in a row with space between them. -> Option A

4. Quick Check:

   Flex default direction = row [OK]

Hint: Flex default direction is row, so children line up horizontally [OK]

Common Mistakes:

• Assuming flex defaults to column
• Thinking boxes overlap without positioning
• Ignoring margin spacing between boxes

4. What is wrong with this CSS if the flex container does not arrange items in a row?

.container {
  display: flex;
  flex-direction: column;
}

medium

A. Flex container needs 'flex-wrap: wrap;' to arrange items.

B. Missing semicolon after display: flex;

C. The value 'column' is wrong; it should be 'row'.

D. Flexbox requires 'display: flexbox;' not 'display: flex;'.

Solution

1. Step 1: Check the flex-direction property value

   The value 'column' arranges children vertically instead of horizontally.

2. Step 2: Correct the value to 'row'

   Changing 'column' to 'row' fixes the layout to arrange items horizontally.

3. Final Answer:

   The value 'column' is wrong; it should be 'row'. -> Option C

4. Quick Check:

   flex-direction: row for horizontal [OK]

Hint: Use 'flex-direction: row' for horizontal layout [OK]

Common Mistakes:

• Using 'column' instead of 'row' for horizontal layout
• Confusing flex and flexbox in display
• Assuming flex-wrap controls direction

5. You want a flex container to stack its child items vertically and center them horizontally. Which CSS achieves this?

hard

A. .container { display: flex; flex-direction: row; justify-content: center; }

B. .container { display: flex; flex-direction: column; align-items: center; }

C. .container { display: flex; flex-wrap: wrap; align-content: center; }

D. .container { display: block; text-align: center; }

Solution

1. Step 1: Set flex-direction to column for vertical stacking

   Using flex-direction: column; stacks children vertically.

2. Step 2: Use align-items: center to center horizontally

   align-items: center; centers items along the cross axis (horizontal in column direction).

3. Final Answer:

   .container { display: flex; flex-direction: column; align-items: center; } -> Option B

4. Quick Check:

   Column + align-items center = vertical stack + horizontal center [OK]

Hint: Use flex-direction column + align-items center for vertical center [OK]

Common Mistakes:

• Using row direction when vertical stack needed
• Confusing justify-content with align-items for cross axis
• Using display block instead of flex