CSS Flexbox Generator — Visual Playground

<!-- Container -->
<div class="fa-section">
  <div class="fa-section-title">Container</div>

  <div class="fa-row">
    <label>display</label>
    <select id="fa-display">
      <option value="flex" selected>flex</option>
      <option value="inline-flex">inline-flex</option>
    </select>
  </div>

  <div class="fa-row">
    <label>flex-direction</label>
    <select id="fa-direction">
      <option value="row" selected>row</option>
      <option value="row-reverse">row-reverse</option>
      <option value="column">column</option>
      <option value="column-reverse">column-reverse</option>
    </select>
  </div>

  <div class="fa-row">
    <label>justify-content</label>
    <select id="fa-justify">
      <option value="flex-start" selected>flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="center">center</option>
      <option value="space-between">space-between</option>
      <option value="space-around">space-around</option>
      <option value="space-evenly">space-evenly</option>
    </select>
  </div>

  <div class="fa-row">
    <label>align-items</label>
    <select id="fa-align-items">
      <option value="stretch" selected>stretch</option>
      <option value="flex-start">flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="center">center</option>
      <option value="baseline">baseline</option>
    </select>
  </div>

  <div class="fa-row">
    <label>align-content</label>
    <select id="fa-align-content">
      <option value="normal" selected>normal</option>
      <option value="flex-start">flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="center">center</option>
      <option value="space-between">space-between</option>
      <option value="space-around">space-around</option>
      <option value="stretch">stretch</option>
    </select>
  </div>

  <div class="fa-row">
    <label>flex-wrap</label>
    <select id="fa-wrap">
      <option value="nowrap" selected>nowrap</option>
      <option value="wrap">wrap</option>
      <option value="wrap-reverse">wrap-reverse</option>
    </select>
  </div>

  <div class="fa-row">
    <label>gap</label>
    <input type="text" id="fa-gap" value="0px" style="max-width:90px;">
  </div>

  <div class="fa-row">
    <label>height</label>
    <input type="text" id="fa-height" value="260px" style="max-width:90px;">
  </div>
</div>

<!-- Items -->
<div class="fa-section">
  <div class="fa-section-title">Items</div>
  <div style="display:flex;gap:5px;margin-bottom:8px;">
    <button class="fa-add-btn" id="fa-add-item">+ Add Item</button>
    <button class="fa-remove-btn" id="fa-remove-item">- Remove</button>
  </div>
  <div class="fa-item-tabs" id="fa-item-tabs"></div>
</div>

<!-- Per-item -->
<div class="fa-section" id="fa-item-controls">
  <div class="fa-section-title">Selected Item</div>

  <div class="fa-row">
    <label>flex-grow</label>
    <input type="number" id="fa-grow" value="0" min="0" max="10" step="1" style="max-width:80px;">
  </div>

  <div class="fa-row">
    <label>flex-shrink</label>
    <input type="number" id="fa-shrink" value="1" min="0" max="10" step="1" style="max-width:80px;">
  </div>

  <div class="fa-row">
    <label>flex-basis</label>
    <input type="text" id="fa-basis" value="auto" style="max-width:80px;">
  </div>

  <div class="fa-row">
    <label>order</label>
    <input type="number" id="fa-order" value="0" min="-10" max="10" step="1" style="max-width:80px;">
  </div>

  <div class="fa-row">
    <label>align-self</label>
    <select id="fa-align-self">
      <option value="auto" selected>auto</option>
      <option value="flex-start">flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="center">center</option>
      <option value="baseline">baseline</option>
      <option value="stretch">stretch</option>
    </select>
  </div>

  <div class="fa-row">
    <label>width</label>
    <input type="text" id="fa-item-width" value="auto" style="max-width:80px;">
  </div>

  <div class="fa-row">
    <label>height</label>
    <input type="text" id="fa-item-height" value="auto" style="max-width:80px;">
  </div>

  <div class="fa-row">
    <label>label</label>
    <input type="text" id="fa-item-label" value="" style="max-width:80px;">
  </div>
</div>