CSS Flexbox Wrap

Toggle class name on click in jQuery

by vinn_aspire

HTML

<!--- flexbox-wrap - start-->
<h1> flexbox-wrap</h1>
<h2> wrap | nowrap | wrap-reverse </h2>
<select name="flexWrap" id="flexWrap" onchange="setFlexboxWrapClass(this.value)">
  <option disabled="disabled" value="select option">select any option</option>
  <option value="wrap">wrap</option>
  <option value="nowrap">nowrap</option>
  <option value="wrap-reverse">wrap-reverse</option>
</select>
<!--- flexbox-wrap - end-->
<br /><br />
<!-- design -->
<div class="container row" id="flexDirectionClass">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
  <div class="flex-item">9</div>
</div>

CSS

.container {
  display: flex;
  width: 300px;
  border: 4px red solid;
}

/* flex-wrap property - start*/
.wrap {
  flex-wrap: wrap !important;
}
.nowrap {
  flex-wrap: nowrap !important;
}
.wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
/* flex-wrap property - end*/

.flex-item {
  background: navy;
  padding: 5px;
  margin: 5px;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

JavaScript

//flex-direction
function setFlexboxWrapClass(value) {
  console.log("value :: " + value);
  var mainContainer = $("#flexDirectionClass");
  mainContainer.removeClass().addClass("container");
  // //adding selected class to container
  mainContainer.addClass(value);
}