FLEXBOX PLAYGROUND

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let itemCount = 4;
    const stage = document.getElementById('flex-stage');
    const elDir = document.getElementById('select-dir');
    const elJustify = document.getElementById('select-justify');
    const elAlign = document.getElementById('select-align');
    const elWrap = document.getElementById('select-wrap');
    const elGap = document.getElementById('input-gap');
    const cssOut = document.getElementById('css-output');
    const toast = document.getElementById('toast');

    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 2000);
    }

    function renderStage() {
      const dir = elDir.value;
      const justify = elJustify.value;
      const align = elAlign.value;
      const wrap = elWrap.value;
      const gap = elGap.value;

      document.getElementById('val-gap').textContent = gap + 'px';

      const css = `display: flex;\nflex-direction: ${dir};\njustify-content: ${justify};\nalign-items: ${align};\nflex-wrap: ${wrap};\ngap: ${gap}px;`;

      stage.style.cssText = css;
      cssOut.textContent = `.container {\n  ${css.replace(/\n/g, '\n  ')}\n}`;
    }

    function updateItems() {
      stage.innerHTML = '';
      for (let i = 1; i <= itemCount; i++) {
        const item = document.createElement('div');
        item.className = 'flex-item-card';
        item.textContent = i;
        stage.appendChild(item);
      }
      renderStage();
    }

    [elDir, elJustify, elAlign, elWrap, elGap].forEach(el => el.addEventListener('change', renderStage));
    elGap.addEventListener('input', renderStage);

    document.getElementById('btn-add-item').addEventListener('click', () => {
      itemCount++;
      updateItems();
    });

    document.getElementById('btn-rem-item').addEventListener('click', () => {
      if (itemCount > 1) {
        itemCount--;
        updateItems();
      }
    });

    document.getElementById('btn-copy-css').addEventListener('click', () => {
      navigator.clipboard.writeText(cssOut.textContent);
      showToast('Flexbox CSS copied!');
    });

    updateItems();