<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

<p>Цей приклад показує як працює властивість <code>flex-flow</code>. Змінюйте значення для під-властивостей нижче, щоб змінити відображення гумового контейнера нижче.</p>

<p>Ви можете вибрати значення для <code>flex-direction</code> i <code>flex-wrap</code> відповідно.</p>

<hr>

<strong>flex-flow: </strong>
<select class="input" id="sel_dir">
  <option value="row" name="value2" selected>row</option>
  <option value="row-reverse" name="value2">row-reverse</option>
  <option value="column" name="value2">column</option>
  <option value="column-reverse" name="value2">column-reverse</option>
</select>
<select class="input" id="sel_wrp">
  <option value="wrap" name="value2" selected>wrap</option>
  <option value="nowrap" name="value2">nowrap</option>
  <option value="wrap-reverse" name="value2">wrap-reverse</option>
</select> 
<strong>;</strong><br><br>

<hr>

<div class="box">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: 'Fira Sans', sans-serif;
}

.child {
  background-color: gold;
  text-align: center;
  font-weight: 700;
  width: 50px;
  height: 50px;
  margin: 2px;
  line-height: 50px;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}

.box {
  width: 100%;
  background-color: #dcdcdc;
  padding: 16px;
  display: flex;
  flex-flow: row wrap;
}

hr {
  margin-bottom: 16px;
}

$('.input').on('change', function() {
  
  var sel_dir = $('#sel_dir').find(":selected").text();
  var sel_wrp = $('#sel_wrp').find(":selected").text();
  
  $('.box').css( 'flex-flow', sel_dir + ' ' + sel_wrp );
  
});