Flex direction in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding flex-direction property

What is the default value of the flex-direction property in a flex container?

A column-reverse

B column

C row-reverse

D row

💡 Hint

Think about how items are laid out horizontally by default.

The default flex-direction is row, which arranges flex items horizontally from left to right.

📝 Syntax

intermediate

CSS syntax for flex-direction

Which of the following CSS snippets correctly sets the flex container to arrange items vertically from top to bottom?

CSS

div.container {
  display: flex;
  /* flex-direction here */
}

A flex-direction: row-reverse;

B flex-direction: column;

C flex-direction: column-reverse;

D flex-direction: vertical;

💡 Hint

The property value should mean vertical stacking from top to bottom.

The value column arranges flex items vertically from top to bottom.

❓ rendering

advanced

Visual output of flex-direction: row-reverse

Given the following HTML and CSS, what will be the order of the items displayed in the browser?

CSS

<style>
.container {
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
}
</style>
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

A Item 3, Item 2, Item 1 (left to right)

B Item 1, Item 2, Item 3 (left to right)

C Item 1, Item 3, Item 2 (left to right)

D Item 2, Item 1, Item 3 (left to right)

💡 Hint

row-reverse reverses the horizontal order of items.

With flex-direction: row-reverse, items are laid out horizontally but in reverse order, so Item 3 appears first on the left.

❓ selector

advanced

Selecting flex container for vertical layout

Which CSS selector and property combination correctly targets a flex container with class menu and sets its items vertically from bottom to top?

A .menu { display: flex; flex-direction: column; }

B #menu { display: flex; flex-direction: row-reverse; }

C .menu { display: flex; flex-direction: column-reverse; }

D .menu { display: block; flex-direction: column-reverse; }

💡 Hint

Look for the correct selector and the property value that reverses vertical order.

The selector '.menu' targets elements with class 'menu'. The value 'column-reverse' arranges items vertically from bottom to top.

❓ accessibility

expert

Accessibility impact of flex-direction changes

When using flex-direction: row-reverse; on a navigation menu, what accessibility consideration should you keep in mind?

A Screen readers may read the menu items in the original HTML order, not the visual reversed order.

B Keyboard navigation order automatically reverses to match the visual order.

C Color contrast is affected by flex-direction changes.

D Flex-direction changes disable ARIA roles on the container.

💡 Hint

Think about how assistive technologies read content compared to visual layout.

Screen readers follow the HTML source order, so reversing visual order with flex-direction does not change reading order, which can confuse users.