flex-direction: column changes the layout direction of a flex container so that flex items are stacked vertically along the main axis, from top to bottom.

Key Points

1
Items are laid out vertically along the main axis.
2
The first item appears at the top, and subsequent items stack below in order.
3
Main-axis properties like justify-content now control vertical spacing between items.
4
Cross-axis properties like align-items control horizontal alignment within the container.
5
It is useful for creating vertical menus, stacked cards, or columnar layouts.

Example: flex-direction: column

In this example, the .container flex items are stacked vertically. justify-content distributes space along the vertical main axis, and align-items centers items along the horizontal cross axis.

Best Practices

1
Use flex-direction: column for vertical layouts like sidebars, stacked cards, or vertical forms.
2
Combine with justify-content and align-items to control spacing and alignment in both axes.
3
Test responsiveness to ensure vertical stacking adapts well to different screen heights.
4
Use column-reverse if you need to reverse the vertical order of items for design purposes.

Difficulty: 3/10

Topics: flexbox layout, column orientation, child stacking

Scenario Questions

0-2 years experience

1
You're building a mobile menu that should stack buttons vertically — how would you use flex-direction to make sure they appear one below the other instead of side by side?
2
If you set flex-direction: column on a container but the children are still appearing horizontally, what’s the most likely mistake you made?
3
You have three divs inside a flex container and want them to stack top-to-bottom — what CSS property do you change and what value do you set?

2-5 years experience

1
A team member says the vertical list in our mobile app is breaking on older iOS devices — the items are overlapping instead of stacking. What could be going wrong with flex-direction: column, and how would you debug it?
2
We’re building a settings screen with a column layout, but the last item keeps getting cut off on small screens. How would you adjust the flex properties to fix this without hardcoding heights?
3
Our component works fine in column mode on desktop, but on tablet the items are suddenly horizontal again — what CSS changes might have caused this, and how would you make it resilient?

5-8 years experience

1
You’re designing a dynamic dashboard component that switches between column and row layouts based on screen size — how do you handle accessibility, performance, and layout recalculations when toggling flex-direction at breakpoints?
2
In a legacy component library, we have dozens of flex containers using column direction, but some are misbehaving with overflow and scroll behavior. How would you audit and standardize this across the system without breaking existing layouts?
3
When using flex-direction: column with dynamic content, we’re seeing layout thrashing on low-end devices. What optimizations or alternatives would you consider to improve rendering performance?

8+ years experience

1
We’re migrating a legacy UI framework that relied on floats and inline-block for vertical layouts to modern flexbox — how do you prioritize which components to refactor first, and how do you ensure backward compatibility during the transition?
2
Our design system uses flex-direction: column as the default for all vertical containers, but now we’re seeing inconsistent behavior across teams due to inherited styles and nested flex contexts. How would you architect a scalable, maintainable layout system to prevent this?
3
A cross-team initiative wants to standardize all vertical layouts using flex-direction: column, but the mobile team argues it’s causing performance issues in scroll-heavy views. How do you evaluate the tradeoffs between developer ergonomics, rendering performance, and long-term maintainability at the architecture level?

Follow-up Questions

❓What happens if you set flex-wrap: wrap on a column-direction container with narrow width?
❓How does justify-content behave differently in column vs row direction?
❓Why might a developer see children overflowing instead of stacking vertically?