HTML & CSS - Mastery / Flexbox Mastery

Flex-wrap

⼓ Flex Wrap

By default, Flexbox tries to fit all flex items into one line. But what if there isn’t enough space?

The flex-wrap property allows items to wrap onto multiple lines, improving responsiveness and preventing layout breaks.

🧱 Master Code block (This code block will be used for further examples)

<style>
    .flex-container {
      display: flex;
      background-color: lightgrey;
      padding: 10px;
      height: max-content;
    }

    .flex-item {
      background: steelblue;
      color: white;
      margin: 5px;
      padding: 100px;
      text-align: center;
    }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
  <div class="flex-item">9</div>
  <div class="flex-item">10</div>
</div>

flex-wrap: nowrap | wrap | wrap-reverse;

It is applied to the flex container, not the individual items.

🔹 Single vs. Multi-line Layouts

Value	Description
`nowrap` (default)	All items stay on one line (may overflow container).
`wrap`	Items wrap onto multiple lines (from top to bottom).
`wrap-reverse`	Like `wrap`, but lines stack in reverse order (bottom to top).

🔸 `nowrap` (Default)

Tries to fit everything in a single row/column.
Items shrink or overflow if there's not enough space.

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

🔸 `wrap`

Items wrap to the next line when they don’t fit.
Great for responsive grids or button rows.

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

🔸 `wrap-reverse`

Items wrap to new lines in reverse (bottom-to-top).

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

🧱 Flex-wrap Playground

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex Wrap Playground</title>
<style>
  .infographic-flexwrap {
    --ink:        #1a1a1a;
    --ink-soft:   #5c5c5c;
    --paper:      #ffffff;
    --paper-alt:  #f0ece4;
    --accent:     #2563eb;
    --accent-soft:#e3ebfd;
    --line:       #ddd6c9;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
  }
  .infographic-flexwrap[data-theme="dark"] {
    --ink:        #e8e6e1;
    --ink-soft:   #9a968c;
    --paper:      #121212;
    --paper-alt:  #1e1e26;
    --accent:     #5b8def;
    --accent-soft:#202942;
    --line:       #2c313d;
  }
  .ha-inner { padding: 0.5rem; }
  .ha-layout { display: flex; flex-direction: column; gap: 1.1rem; }

  .ha-code {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 0.8rem 1.8rem 0.8rem 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
    color: #e5e5e5;
    overflow-x: auto;
  }
  .ha-code .ha-prop { color: #c586c0; }
  .ha-code .ha-val-hl { color: #ffd166; font-weight: 700; }
  .ha-code .ha-sel { color: #f472b6; font-weight: 700; }

  .ha-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .ha-pill {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .ha-pill:hover { border-color: var(--accent); }
  .ha-pill.ha-on { background: var(--accent); border-color: var(--accent); color: #fff; }

  .ha-stage-outer {
    background: var(--paper-alt);
    border-radius: 10px;
    padding: 1rem;
  }
  .ha-stage-label {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.65rem;
    color: var(--ink-soft);
    margin-bottom: 0.5rem;
    text-align: center;
  }
  .ha-stage {
    background: lightgrey;
    border-radius: 8px;
    padding: 12px;
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
    gap: 8px;
    transition: height 0.3s ease;
    overflow-x: auto;
  }
  .ha-flex-item {
    background: steelblue;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 50px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .ha-note {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
</style>
</head>
<body>

<div class="infographic-flexwrap" id="ha-root">
  <div class="ha-inner">
    <div class="ha-layout">

      <div class="ha-code" id="code-out"></div>

      <div class="ha-pills" id="wrap-pills">
        <button class="ha-pill" data-val="nowrap">nowrap</button>
        <button class="ha-pill ha-on" data-val="wrap">wrap</button>
        <button class="ha-pill" data-val="wrap-reverse">wrap-reverse</button>
      </div>

      <div class="ha-stage-outer">
        <div class="ha-stage-label">container is only 320px wide — six 80px items (480px + gaps) don't fit on one line</div>
        <div class="ha-stage" id="stage">
          <div class="ha-flex-item">1</div>
          <div class="ha-flex-item">2</div>
          <div class="ha-flex-item">3</div>
          <div class="ha-flex-item">4</div>
          <div class="ha-flex-item">5</div>
          <div class="ha-flex-item">6</div>
        </div>
      </div>

      <div class="ha-note" id="note-out"></div>

    </div>
  </div>
</div>

<script>
(function () {
  const wrapper = document.getElementById('ha-root');
  const bodyAttr = document.body.getAttribute('data-darkmode');
  let dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

(function () {
  const stage = document.getElementById('stage');
  const codeOut = document.getElementById('code-out');
  const note = document.getElementById('note-out');
  const items = Array.from(stage.querySelectorAll('.ha-flex-item'));

  const notes = {
    'nowrap': "The default. All items are forced onto a single line — since they don't fit, they either shrink (if they can) or overflow the container. Here they overflow, so the box scrolls horizontally.",
    'wrap': 'Items that don\u2019t fit spill onto a new line below, filling top-to-bottom in source order (1-4 on line one, 5-6 on line two).',
    'wrap-reverse': 'Still wraps onto multiple lines, but the line order flips — the first line (1-4) ends up on the BOTTOM, with the overflow line (5-6) on top.'
  };

  function animateWrapChange(newVal) {
    const firstRects = items.map(el => el.getBoundingClientRect());

    stage.style.flexWrap = newVal;
    stage.style.overflowX = newVal === 'nowrap' ? 'auto' : 'hidden';
    void stage.offsetHeight;

    const lastRects = items.map(el => el.getBoundingClientRect());

    items.forEach((el, i) => {
      const dx = firstRects[i].left - lastRects[i].left;
      const dy = firstRects[i].top - lastRects[i].top;
      el.style.transition = 'none';
      el.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
    });

    requestAnimationFrame(() => {
      items.forEach(el => {
        el.style.transition = 'transform 0.45s cubic-bezier(0.22, 1, 0.36, 1)';
        el.style.transform = 'translate(0, 0)';
      });
    });
  }

  document.getElementById('wrap-pills').querySelectorAll('.ha-pill').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.ha-pill').forEach(p => p.classList.remove('ha-on'));
      btn.classList.add('ha-on');
      const val = btn.getAttribute('data-val');

      animateWrapChange(val);

      codeOut.innerHTML = '<span class="ha-sel">.flex-container</span> {\n  ' +
        '<span class="ha-prop">display</span>: flex;\n  ' +
        '<span class="ha-prop">flex-wrap</span>: <span class="ha-val-hl">' + val + '</span>;\n}';
      note.textContent = notes[val];
    });
  });

  stage.style.flexWrap = 'wrap';
  codeOut.innerHTML = '<span class="ha-sel">.flex-container</span> {\n  ' +
    '<span class="ha-prop">display</span>: flex;\n  ' +
    '<span class="ha-prop">flex-wrap</span>: <span class="ha-val-hl">wrap</span>;\n}';
  note.textContent = notes['wrap'];
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

📱 Layout Breaking & Responsiveness

❌ Problem without wrap:

Items may overflow or shrink too small.
Breaks layouts on small screens.

✅ With flex-wrap: wrap:

Items wrap into new rows or columns.
Enables responsive, content-friendly layouts.

✅ Summary

Value	Behavior
`nowrap`	All items stay in a single line
`wrap`	Items wrap to next line (top → bottom)
`wrap-reverse`	Items wrap in reverse (bottom → top)

Prev Next chapter