CSS Flexboxジェネレーター — ビジュアルプレイグラウンド

<!-- コンテナ設定 -->
<div class="fa-section">
  <div class="fa-section-title">コンテナ</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>

<!-- アイテム管理 -->
<div class="fa-section">
  <div class="fa-section-title">アイテム</div>
  <div style="display:flex;gap:5px;margin-bottom:8px;">
    <button class="fa-add-btn" id="fa-add-item">+ 追加</button>
    <button class="fa-remove-btn" id="fa-remove-item">- 削除</button>
  </div>
  <div class="fa-item-tabs" id="fa-item-tabs"></div>
</div>

<!-- 選択アイテム設定 -->
<div class="fa-section" id="fa-item-controls">
  <div class="fa-section-title">選択アイテム</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>
    <input type="text" id="fa-item-label" value="" style="max-width:80px;">
  </div>
</div>