Edit on
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

<button id="btn">Toggle Wrap</button>
<div id="basisSlider"/></div>
<div class="flex-container">

  <div class="flex-item flex-item--one">
    <h2>1</h2>
    <code>
      .this-item {<br>
      <label>flex-basis:</label><input type="text" class="basis" value="100px"/>;<br>
      <label>flex-grow:</label><input type="text" class="grow" value="0"/>;<br>
      <label>flex-shrink:</label><input type="text" class="shrink" value="0"/>;<br>
      <label>align-self:</label><input type="text" class="align" value="center"/>;<br>
      <label>order:</label><input type="text" class="order" value="0"/>;<br>
      }
    </code>
  </div>
  
  <div class="flex-item">
    <h2>2</h2>
    <code>
      .this-item {<br>
      <label>flex-basis:</label><input type="text" class="basis" value="100px"/>;<br>
      <label>flex-grow:</label><input type="text" class="grow" value="0"/>;<br>
      <label>flex-shrink:</label><input type="text" class="shrink" value="0"/>;<br>
      <label>align-self:</label><input type="text" class="align" value="center"/>;<br>
      <label>order:</label><input type="text" class="order" value="0"/>;<br>
      }
    </code>
  </div>
  
  <div class="flex-item">
    <h2>3</h2>
    <code>
      .this-item {<br>
      <label>flex-basis:</label><input type="text" class="basis" value="100px"/>;<br>
      <label>flex-grow:</label><input type="text" class="grow" value="0"/>;<br>
      <label>flex-shrink:</label><input type="text" class="shrink" value="0"/>;<br>
      <label>align-self:</label><input type="text" class="align" value="center"/>;<br>
      <label>order:</label><input type="text" class="order" value="0"/>;<br>
      }
    </code>
  </div>
  
  <div class="flex-item">
    <h2>4</h2>
    <code>
      .this-item {<br>
      <label>flex-basis:</label><input type="text" class="basis" value="100px"/>;<br>
      <label>flex-grow:</label><input type="text" class="grow" value="0"/>;<br>
      <label>flex-shrink:</label><input type="text" class="shrink" value="0"/>;<br>
      <label>align-self:</label><input type="text" class="align" value="center"/>;<br>
      <label>order:</label><input type="text" class="order" value="0"/>;<br>
      }
    </code>
  </div>

</div>
button {
  display:inline-block;
  vertical-align:middle;
  width:100px;
  position:relative;
  top:25px;
  margin-left:10px;
  z-index:10;
  &.toggled {
    font-weight:bold;
  }
}
#basisSlider {
  display:inline-block;
  vertical-align:middle;
  position:relative;
  top:25px;
  z-index:10;
  width:400px;
}
.flex-container {
  box-sizing: border-box;
  background-color:rgba(red,0.5);
  display:flex;
  &.toggled{ flex-wrap:wrap; }
  justify-content: space-around;
  padding:60px 10px 10px;
  font-family:sans-serif;
  .flex-item {
    h2 {margin-top:0;}
    flex-basis:100px;
    align-self:center;
    order:0;
    
    
    background-color:rgba(red,0.5);
    text-align:center;
    color:white;
    padding:10px;
    border:1px solid rgba(darkred,0.5);
    padding-bottom:20px;
    code {
      text-align:left;
      display:inline-block;
    }
    label {
      width:90px;
      display:inline-block;
      text-align:left;
      margin-left:20px;
    }
    input {
      width:70px;
    }
    
  }
}
View Compiled
$(document).keypress(function(e) {
    if(e.which == 13) {
        updateVals();
    }
});
function updateVals(){
  $('.flex-item').each(function(){
    $(this).css('flex-basis', $(this).find('.basis').val());
    $(this).css('flex-grow', $(this).find('.grow').val());
    $(this).css('flex-shrink', $(this).find('.shrink').val());
    $(this).css('align-self', $(this).find('.align').val());
    $(this).css('order', $(this).find('.order').val());
  });
};

$('.flex-container').resizable({
  handles: "e, w"
});

$( "#basisSlider" ).slider({
  min: 0,
  max: 500,
  slide: function( event, ui ) {
    $('.flex-item').each(function(){
      $(this).css('flex-basis', ui.value + 'px');
      $(this).find('.basis').val(ui.value + 'px');
    });
  }
});

$('#btn').on('click', function(){
  $(this).toggleClass('toggled');
  $('.flex-container').toggleClass('toggled');
});
Rerun