flex-wrap

Determines whether items should stay on a single line or wrap.

nowrap (default): Everything on one line, even if it overflows.
wrap: Items move to a new line if they don’t fit.
wrap-reverse: Same as wrap, but wrapping occurs in reverse order.

Example

With this dynamic example you can see the different arrangements of the child elements by modifying the flex-wrap property in the selector.

Select flex-wrap:

nowrapwrapwrap-reverse

ResultLiveContainer width30%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.