<div class="container">
  <div class="buttons">
    <button class="button" onclick="functionWrap()">wrap</button>
    <button class="button" onclick="functionWrapReverse()">wrap-reverse</button>
    <button class="button" onclick="functionNoWrap()">nowrap</button>
  </div>
  
<div id="box-content">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
  <div class="e">5</div>
  <div class="f">6</div>
</div>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#box-content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  flex-wrap: nowrap;
}

.a, .b, .c, .d, .e, .f {
  width: 50px;
  height: 50px;
}

.a {
  background-color:#264653;
  color: white;
}

.b {
  background-color:#2a9d8f;
}

.c {
  background-color:#e9c46a;
}
.d {
  background-color:#f4a261;
}

.e {
  background-color:#e76f51;
}

.f {
  background-color:#264653;
  color: white;
}
.buttons {
  margin-left:-120px;
  top:155px;
  position: relative;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 100px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}

function functionWrap() {
  document.getElementById("box-content").style.flexWrap="wrap" 
}
function functionWrapReverse() {
  document.getElementById("box-content").style.flexWrap="wrap-reverse" 
}
function functionNoWrap() {
  document.getElementById("box-content").style.flexWrap="nowrap" 
}