Why flexbox is needed in CSS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use Flexbox for layout?

Which of the following best explains why Flexbox is useful in web design?

A It allows easy alignment and distribution of space among items in a container, even when their size is unknown or dynamic.

B It automatically creates grid layouts without any extra code.

C It replaces the need for all CSS properties like margin and padding.

D It only works for fixed width and height elements.

💡 Hint

Think about how items can be arranged when their sizes change.

Flexbox helps arrange items in a container by distributing space and aligning items easily, especially when sizes are dynamic or unknown.

📝 Syntax

intermediate

Flexbox container property

Which CSS property correctly makes an element a flex container?

A align-items: stretch;

B flex-direction: row;

C justify-content: center;

D display: flex;

💡 Hint

Look for the property that changes the display behavior of the container.

The display: flex; property turns an element into a flex container, enabling flexbox layout for its children.

❓ layout

advanced

Flexbox alignment behavior

Given a flex container with justify-content: space-between;, what will be the horizontal spacing between three child items?

A Items are stacked vertically with equal spacing.

B The first item is at the start, the last item at the end, and the middle item is spaced evenly between them.

C All items are packed together at the start with no space between.

D All items are centered with equal space around them.

💡 Hint

Think about how space is distributed between items horizontally.

justify-content: space-between; places the first item at the start, the last at the end, and evenly spaces the items in between horizontally.

❓ accessibility

advanced

Flexbox and keyboard navigation

How does using Flexbox affect keyboard navigation order of items in a container?

A Flexbox disables keyboard navigation by default.

B Flexbox automatically updates keyboard navigation to match visual order.

C Flexbox changes the visual order but does not change the DOM order, so keyboard navigation follows the DOM order unless modified.

D Flexbox reverses the keyboard navigation order.

💡 Hint

Consider how screen readers and keyboard focus follow the HTML structure.

Flexbox changes how items look on screen but does not change the order in the HTML code, so keyboard navigation follows the HTML order unless you use additional properties.

❓ selector

expert

Selecting flex items with CSS

Which CSS selector targets only the second flex item inside a flex container?

A .container > :nth-child(2)

B .container:nth-child(2)

C .container > .flex-item:nth-of-type(1)

D .container > :first-child

💡 Hint

Think about how to select the second child element inside a container.

The selector .container > :nth-child(2) selects the second direct child of .container, which is the second flex item.