CSS Flexbox - Flexbox Flow

CSS Flexbox - Flexbox Flow

by vinn_aspire

HTML

<!--- flexbox-flow - start-->
<h1> flexbox-flow</h1>
<h3> row-wrap | row-nowrap | row-wrap-reverse | column-nowrap | column-wrap | column-wrap-reverse </h3>
<select name="flexWrap" id="flexWrap" onchange="setFlexboxFlowClass(this.value)">
  <option disabled="disabled" value="select option">select any option</option>
  <option value="nowrap">nowrap</option>
  <option value="row">row</option>
  <option value="column">column</option>
  <option value="row-reverse">row-reverse</option>
  <option value="column-reverse">column-reverse</option>
  <option value="row-nowrap">row nowrap</option>
  <option value="row-wrap-reverse">wrap reverse</option>
  <option value="column-wrap">column wrap</option>
  <option value="column-nowrap">column nowrap</option>
  <option value="column-wrap-reverse">column wrap-reverse</option>
  <option value="column-reverse-wrap-reverse">column-reverse wrap-reverse</option>
</select>
<!--- flexbox-flow - end-->
<br /><br />
<!-- design -->
<div class="container row" id="flexFlowClass">
  <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 class="flex-item">10</div>
</div>

CSS

.container {
  display: flex;
}

/* flex-flow property - start
row|column|row-reverse|column-reverse|nowrap|wrap|wrap-reverse|
row nowrap|row wrap|column wrap|column nowrap|column-reverse wrap-reverse
*/
.nowrap {
  flex-flow: nowrap !important;
}
.row {
  flex-flow: row !important;
}
.row-reverse {
  flex-flow: row-reverse !important;
}
.column {
  flex-flow: column !important;
}
.column-reverse {
  flex-flow: column-reverse !important;
}

.row-wrap {
  flex-flow: row wrap !important;
}
.row-nowrap {
  flex-flow: row nowrap !important;
}
.row-wrap-reverse {
  flex-flow: row wrap-reverse !important;
}
.column-nowrap {
  flex-flow: column nowrap !important;
}
.column-wrap {
  flex-flow: column wrap !important;
}
.column-wrap-reverse {
  flex-flow: column wrap-reverse !important;
}
.column-reverse-wrap-reverse {
  flex-flow: column-reverse wrap-reverse !important;
}
/* flex-flow 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-flow
function setFlexboxFlowClass(value) {
  console.log("setFlexboxFlow value :: " + value);
  var mainContainer = $("#flexFlowClass");
  mainContainer.removeClass().addClass("container");
  // //adding selected class to container
  mainContainer.addClass(value);
}