<div class="controls">
  
  <label for="directionselect">flex-direction:</label>
  <select id="directionselect">
    <option value="row">row</option>
    <option value="column">column</option>
  </select>

  <label for="wrapselect">flex-wrap:</label>
  <select id="wrapselect">
    <option value="wrap">wrap</option>
    <option value="wrap-reverse">wrap-reverse</option>
  </select>
  
</div>

<div class="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
</div>

html {
  background: #f6faff;
}

/*-- --*/
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 35rem;
}
.item {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  padding: 3rem;
  background: #dfeffd;
  border: 3px solid #457fdc;
  color: #457fdc;
  margin: 6px;
}

.controls {
  padding: 30px 6px;
  font-size: 1.2rem;
  color: #2f4f4f;
}

.controls select {
  margin-right: 20px;
  color: #2f4f4f;
}

$(document).ready(function(){
  
  $("#directionselect").change(function () {
      var direction = $("#directionselect").val();;
      $(".container").css("flex-direction",direction);
  });
  
  $("#wrapselect").change(function () {
      var wrap = $("#wrapselect").val();;
      $(".container").css("flex-wrap",wrap);
  });
  
});