flex-direction: row is the default value for a flex container. It arranges flex items horizontally along the main axis, starting from the left and going to the right (in left-to-right languages).

Key Points

1
Items are laid out in a horizontal row along the main axis.
2
The first item appears at the start (left) of the container, and subsequent items follow in order.
3
Main-axis properties like justify-content control spacing between items horizontally.
4
Cross-axis properties like align-items control vertical alignment within the container.
5
It is suitable for creating horizontal navigation bars, rows of cards, or any layout that flows left-to-right.

Example: flex-direction: row

In this example, the flex container arranges .item elements in a horizontal row. They are evenly spaced along the main axis using justify-content and centered along the cross axis using align-items.

Best Practices

1
Use flex-direction: row for horizontal layouts like menus, toolbars, or card rows.
2
Combine with justify-content for horizontal spacing and align-items for vertical alignment.
3
Test the layout on different screen sizes to ensure items remain properly aligned.
4
Switch to row-reverse if you need to reverse the horizontal order for RTL or design purposes.

Difficulty: 3/10

Topics: flexbox layout, row vs column, responsive alignment

Scenario Questions

0-2 years experience

1
You're building a navigation bar with five links, and they're stacking vertically instead of lining up horizontally — you've set display: flex but they're still not in a row. What’s the most likely missing or incorrect property?
2
How would you make a card component with a title and two buttons side-by-side using flexbox, and what would happen if you accidentally set flex-direction: column instead?
3
If you have a flex container with three items and you set flex-direction: row, but one item is much wider than the others, how does that affect the layout without any other flex properties?

2-5 years experience

1
A mobile-first product card component works fine on desktop with flex-direction: row, but on tablet, the image and text content overlap awkwardly. How would you diagnose and fix this without breaking the desktop layout?
2
Your team’s design system uses flex-direction: row for form fields, but in RTL locales, the labels and inputs appear in the wrong order. How would you handle this without duplicating CSS?
3
A feature toggle caused flex-direction to switch between row and column based on user preference, but now the spacing between items is inconsistent. What could be causing this, and how would you fix it?

5-8 years experience

1
You’re designing a reusable horizontal list component that needs to support both inline scrolling and wrapping on small screens. How would you structure the flexbox rules to handle both cases gracefully without media query bloat?
2
A legacy component uses flex-direction: row with fixed widths, but now we need to support dynamic content length and variable screen sizes. What tradeoffs do you consider when migrating from fixed widths to flex-based sizing?
3
In a high-performance dashboard with 50+ horizontal flex items, users report jank during resize. What CSS properties or layout strategies would you audit to improve rendering performance?

8+ years experience

1
Your company’s design system has hundreds of components using flex-direction: row, but some are breaking in new internationalization contexts. How would you architect a scalable, maintainable solution to handle LTR/RTL without breaking existing layouts?
2
We’re migrating from a float-based grid to flexbox across 20+ product teams. What governance, documentation, and tooling would you put in place to ensure consistent use of flex-direction: row and avoid regressions?
3
A cross-team component library uses flex-direction: row for horizontal layouts, but the engineering team wants to switch to CSS Grid for better control. How would you evaluate the cost-benefit, manage the migration, and communicate the impact to designers and frontend teams?

Follow-up Questions

❓What happens if you set flex-direction: row on a container with very wide children?
❓How would you debug a layout where items are stacking vertically despite flex-direction: row being set?
❓When would you choose row-reverse instead of row?