CSS

CSS

🎯 CSS flex-wrap Property

The flex-wrap CSS property controls whether flex items should wrap onto a new line in a Flexbox layout.

By default, flex items try to stay on a single line. flex-wrap defines what happens when they no longer fit.

πŸ”Ή Why Use flex-wrap?

  • Benefits

  • πŸ“Œ Controls whether flex items break into new rows
  • πŸ“Œ Essential for responsive design
  • πŸ“Œ Prevents overflow issues in flex layouts
  • πŸ“Œ Helps create adaptive UI components

πŸ”Ή flex-wrap Values

  • nowrap β†’ Default value, all items stay on one line
  • wrap β†’ Items move to a new line if needed
  • wrap-reverse β†’ Items wrap in reverse direction (new line goes upward)
  • initial β†’ Resets to default (nowrap)

🧩 Basic Example

CSS

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

In this example, flex items will wrap onto new lines when they no longer fit in a single row.

  • 🧠 Summary

  • flex-wrap controls whether flex items wrap onto new lines.
  • It is essential for responsive Flexbox layouts.
  • wrap is the most commonly used value.
  • Helps prevent overflow and layout breaking.
CSS flex-direction
CSS flex-flow