The flex-flow property in CSS is a shorthand for defining both the flex-direction and flex-wrap properties in one declaration. It allows you to control the direction of flex items and whether they should wrap onto multiple lines within a flex container.

Syntax

1
flex-flow: <flex-direction> <flex-wrap>;
2
Both values are optional, and if omitted, their defaults (row and nowrap) are used.

Possible Values

1
flex-direction: Defines the direction of the main axis (row, row-reverse, column, column-reverse).
2
flex-wrap: Determines whether flex items stay on one line or wrap (nowrap, wrap, wrap-reverse).

Example: Using flex-flow

In this example, flex-flow: row wrap sets the flex container to arrange items in a row and allows them to wrap onto multiple lines when necessary.

Best Practices

1
Use flex-flow for concise and readable Flexbox declarations.
2
Combine row wrap for horizontal layouts that adjust across screen sizes.
3
Remember that the default value is flex-flow: row nowrap if unspecified.

Difficulty: 3/10

Topics: flex-direction, flex-wrap, shorthand composition

Scenario Questions

0-2 years experience

1
You're building a mobile navigation bar that should stack vertically on small screens but stay horizontal on desktop. How would you use flex-flow to achieve that?
2
If you set flex-flow: wrap row; on a container but the items still don't wrap, what's the most likely mistake?
3
How would you write the shortest flex-flow rule to make items flow horizontally and never wrap?

2-5 years experience

1
A team member changed flex-flow from row wrap to column wrap on a product grid, and now the layout breaks on tablets. How would you debug this?
2
You're building a responsive card layout that needs to switch from row to column on medium screens. Why might you prefer flex-flow over media queries with separate flex-direction and flex-wrap declarations?
3
A flex container with flex-flow: column nowrap is causing overflow on mobile. What are two ways to fix this without changing the HTML structure?

5-8 years experience

1
You're designing a reusable layout component that must support both horizontal and vertical flows based on theme or user preference. How would you architect the CSS to make flex-flow dynamic and maintainable?
2
In a high-traffic UI with hundreds of flex containers, how might using flex-flow vs. separate properties impact rendering performance or bundle size?
3
A legacy component uses flex-direction: row and flex-wrap: wrap separately. You're refactoring for consistency. What risks do you assess before switching to flex-flow?

8+ years experience

1
Your company is migrating from a legacy grid system to CSS Flexbox. How would you standardize flex-flow usage across 50+ teams to avoid layout fragmentation and technical debt?
2
You're designing a design system for a global product with RTL and LTR locales. How does flex-flow interact with direction: rtl, and what edge cases must you document for global teams?
3
A critical component uses flex-flow in a way that breaks under CSS containment. How would you evaluate whether to refactor it, and what long-term architectural tradeoffs do you weigh?

Follow-up Questions

❓What happens if you set flex-flow to row-reverse wrap?
❓How would you debug a layout where items aren't wrapping as expected despite using flex-flow?
❓Why might you choose to use flex-flow over setting flex-direction and flex-wrap separately?