The direction of items in a flex container is controlled using the flex-direction property. This determines the main axis along which the flex items are laid out.

Key Points About Flex Direction

1
flex-direction: row (default) lays out items horizontally from left to right.
2
flex-direction: row-reverse lays out items horizontally from right to left.
3
flex-direction: column lays out items vertically from top to bottom.
4
flex-direction: column-reverse lays out items vertically from bottom to top.
5
Changing the direction affects how main-axis properties like justify-content work, while cross-axis properties like align-items adjust accordingly.

Example: Changing Flex Direction

In this example, the .container flex items are arranged in a column because of flex-direction: column. Changing flex-direction to row or other values will reposition the items along the main axis accordingly.

Best Practices

1
Use flex-direction to control whether your layout flows horizontally or vertically.
2
Combine with justify-content and align-items to fine-tune item alignment along the main and cross axes.
3
Test different directions for responsive design to ensure layouts adapt correctly on various screen sizes.
4
Avoid using too many nested flex containers to maintain layout clarity and performance.

Difficulty: 3/10

Topics: flex-direction, flex-wrap, row vs column layout

Scenario Questions

0-2 years experience

1
You're building a mobile menu that should stack vertically on small screens but show horizontally on desktop. How would you use flex-direction to achieve that with a media query?
2
A button group is rendering left-to-right, but the designer wants them right-to-left. What CSS property do you change and what value do you set?
3
If you set flex-direction: column on a container with three divs, what order do they appear in visually?

2-5 years experience

1
A responsive card grid breaks on tablet — items are wrapping strangely even though you set flex-wrap: wrap. What could be causing it, and how would you debug whether flex-direction is part of the issue?
2
Your team’s component library has a flex-based navigation bar that works fine in LTR languages, but when you enable RTL support, the icons and text reverse incorrectly. How do you fix this without duplicating CSS?
3
A feature toggle switches between horizontal and vertical layouts for a dashboard widget. Users report that focus order gets messed up when toggling. What’s the root cause and how do you fix it?

5-8 years experience

1
You’re designing a dynamic layout system where users can reorder sections via drag-and-drop. How do you handle flex-direction changes without breaking screen reader navigation or causing layout thrashing?
2
A legacy component uses flex-direction: row-reverse for visual alignment, but now we need to support RTL and accessibility. What’s the cleanest way to migrate this without breaking existing styles or introducing a11y issues?
3
In a high-performance dashboard with 50+ dynamic flex items, switching flex-direction on resize causes jank. How would you optimize this without sacrificing responsiveness?

8+ years experience

1
Our design system supports 12+ languages including RTL scripts. How do you architect the flex layout primitives to avoid per-language CSS overrides while ensuring correct visual and semantic order across all locales?
2
We’re migrating from a float-based grid to flexbox across 200+ legacy pages. Many rely on row-reverse for visual alignment. What’s your strategy to refactor this safely without breaking accessibility, SEO, or internationalization?
3
A cross-team component library uses flex-direction dynamically based on viewport, but different teams are overriding it inconsistently. How do you enforce a coherent layout strategy at scale without stifling autonomy?

Follow-up Questions

❓What happens if you have text wrapping inside a flex item when flex-direction is column?
❓How would you debug a layout where items appear stacked vertically when you expected them to be horizontal?
❓Why might flex-direction: row-reverse break an accessibility screen reader order?