CSS Flexbox Playground

Experiment with all Flexbox properties visually. Click an item to adjust its individual properties. Copy the generated CSS anytime.

Items
3 items 
<!-- Container -->
<div class="fb-panel" style="margin-bottom:16px;">
  <div class="fb-panel-header">Container Properties</div>
  <div class="fb-panel-body">
    <p class="fb-section-title">flex-direction</p>
    <div class="fb-control-group">
      <select class="fb-select" id="fb-flex-direction">
        <option value="row">row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>
    </div>
    <p class="fb-section-title">flex-wrap</p>
    <div class="fb-control-group">
      <select class="fb-select" id="fb-flex-wrap">
        <option value="nowrap">nowrap</option>
        <option value="wrap">wrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
      </select>
    </div>
    <p class="fb-section-title">justify-content</p>
    <div class="fb-control-group">
      <select class="fb-select" id="fb-justify-content">
        <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="space-evenly">space-evenly</option>
      </select>
    </div>
    <p class="fb-section-title">align-items</p>
    <div class="fb-control-group">
      <select class="fb-select" id="fb-align-items">
        <option value="stretch">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>
    <p class="fb-section-title">align-content</p>
    <div class="fb-control-group">
      <select class="fb-select" id="fb-align-content">
        <option value="normal">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="space-evenly">space-evenly</option>
        <option value="stretch">stretch</option>
      </select>
    </div>
    <p class="fb-section-title">gap</p>
    <div class="fb-control-group">
      <div class="fb-range-row">
        <input type="range" class="fb-range" id="fb-gap" min="0" max="40" value="8" step="2">
        <span class="fb-range-val" id="fb-gap-val">8px</span>
      </div>
    </div>
  </div>
</div>

<!-- Item -->
<div class="fb-panel">
  <div class="fb-panel-header">Item Properties <span id="fb-item-label" style="opacity:0.75;font-weight:400;">(Item 1)</span></div>
  <div class="fb-panel-body">
    <p class="fb-section-title">order</p>
    <div class="fb-control-group">
      <div class="fb-range-row">
        <input type="range" class="fb-range" id="fb-order" min="-5" max="10" value="0" step="1">
        <span class="fb-range-val" id="fb-order-val">0</span>
      </div>
    </div>
    <p class="fb-section-title">flex-grow</p>
    <div class="fb-control-group">
      <div class="fb-range-row">
        <input type="range" class="fb-range" id="fb-flex-grow" min="0" max="10" value="0" step="1">
        <span class="fb-range-val" id="fb-flex-grow-val">0</span>
      </div>
    </div>
    <p class="fb-section-title">flex-shrink</p>
    <div class="fb-control-group">
      <div class="fb-range-row">
        <input type="range" class="fb-range" id="fb-flex-shrink" min="0" max="10" value="1" step="1">
        <span class="fb-range-val" id="fb-flex-shrink-val">1</span>
      </div>
    </div>
    <p class="fb-section-title">flex-basis</p>
    <div class="fb-control-group">
      <select class="fb-select" id="fb-flex-basis">
        <option value="auto">auto</option>
        <option value="0">0</option>
        <option value="50px">50px</option>
        <option value="80px">80px</option>
        <option value="100px">100px</option>
        <option value="120px">120px</option>
        <option value="150px">150px</option>
        <option value="200px">200px</option>
        <option value="25%">25%</option>
        <option value="33%">33%</option>
        <option value="50%">50%</option>
      </select>
    </div>
    <p class="fb-section-title">align-self</p>
    <div class="fb-control-group">
      <select class="fb-select" id="fb-align-self">
        <option value="auto">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>
</div>
Live Preview
<div class="fb-code-wrap">
  <div class="fb-code-header">
    <span>Generated CSS</span>
    <button class="fb-copy-btn" id="fb-copy-btn">Copy CSS</button>
  </div>
  <pre class="fb-code" id="fb-code-output"></pre>
</div>

CSS Clip-Path → CSS Clip-Path Maker

CSS Specificity → CSS Specificity Calculator