Flex Wrap and Order

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

Flex Wrap and Order are the CSS Flexbox features you use to decide how stuff behaves when you run out of room and in what order it shows up, no matter how you organize your HTML.

1. Flex Wrap: Managing the “Overflow”

Except for the nowrap part, this is the default behavior of Flexbox. Flexbox will make an earnest effort to put all of the items in one line. For example, if you have ten huge boxes in a single container, all of them will squeeze each other until they‘re paper-thin needles in order to stay on the one line.

Flex Wrap tells the container: “If you run out of room, start a new line.”

The Properties:

flex-wrap: nowrap; (Default): All items will sit on the same line. If they can‘t fit it the container, either the items will shrink or they will overflow.
flex-wrap: wrap;Items will allow to have a newline (byflown), when the first time : flex is full.
flex-wrap: wrap-reverse;: Items will display on a new line if wrapping occurs, but rather than below the previous line they will be above it (bottom to top).

2. Order: Changing the Sequence

The default way HTML displays items on the screen is in the order that they are written. However, when you use the Order property, it is possible to display your items at the Beginning, Middle or when;

How it Works:

The default value for every flex item is 0.
Items are laid out based on their order value, from lowest to highest.
If two items have the same value, they follow the original HTML order.

Examples:

Moving to the front: Give an item order: -1;. Since -1 is lower than 0, it jumps to the start.
Moving to the back: Give an item order: 1; (or any positive number).

Note: Use order carefully for accessibility. A screen reader will still read the items in the original HTML sequence, even if they look different on the screen!

Simple Comparison Table

Property	What it controls	Key takeaway
Flex Wrap	The “Lines”	Decides if items stay on one line or break into many.
Order	The “Sequence”	Decides which item comes first, second, or last visually.

A Quick Example Code Snippet:

CSS

.container {
  display: flex;
  flex-wrap: wrap; /* Allows items to jump to the next line */
}

.item-3 {
  order: -1; /* This third item will now appear first! */
}