CSS

CSS

🎯 CSS flex-flow Property

The flex-flow CSS shorthand property combines flex-direction and flex-wrap into a single declaration.

It defines both the direction of flex items and whether they should wrap or not.

πŸ”Ή Why Use flex-flow?

  • Benefits

  • πŸ“Œ Combines direction + wrapping in one property
  • πŸ“Œ Simplifies Flexbox code
  • πŸ“Œ Improves readability and maintainability
  • πŸ“Œ Essential for responsive layouts

🧩 Examples

Example 1:

CSS

.container {
    display: flex;
    flex-flow: row wrap;
}

This means: items are arranged horizontally and will wrap onto a new line if needed.

Example 2:

CSS

.container {
    display: flex;
    flex-flow: column nowrap;
}

This means: items are arranged vertically and will never wrap.

  • 🧠 Quick Summary

  • flex-flow β†’ shorthand for flex-direction + flex-wrap
  • row β†’ horizontal layout
  • column β†’ vertical layout
  • wrap β†’ allows wrapping to new lines
  • nowrap β†’ prevents wrapping
  • wrap-reverse β†’ reverse wrapping direction
  • initial β†’ resets to default
CSS flex-wrap
CSS flex-basis