What does the flex-flow property control and what are its possible values?

flex-flow is a one-line shorthand that sets both the direction items flow in and whether they wrap onto new lines.

It bundles two properties: flex-direction (which way items run) and flex-wrap (what happens when they don't fit).

Direction (flex-direction):

• row (default) — left to right
• column — top to bottom
• row-reverse — right to left
• column-reverse — bottom to top

Wrapping (flex-wrap):

• nowrap (default) — everything is forced onto one line; items shrink to fit
• wrap — items keep their size and overflow onto a new line
• wrap-reverse — same, but new lines stack in the opposite direction

#parent {
  display: flex;
  /* Lay out in a row, and wrap to new rows when needed */
  flex-flow: row wrap;
}

The key trade-off to remember: with nowrap, items get squeezed to stay on one line; with wrap, they keep their intended size and create extra rows or columns instead.