CSS Flexbox - align-content

CSS Flexbox - align-content

by vinn_aspire

HTML

<!--- align-content - start-->
<h1> align-content</h1>
<h3> stretch | center | flex-start | flex-end | space-between | space-around | initial </h3>
<select name="alignItems" id="alignItems" onchange="setFlexboxClass(this.value)">
  <option disabled="disabled" value="select option">select any option</option>
  <option value="align-content-initial">Initial</option>
  <option value="align-content-stretch">stretch</option>
  <option value="align-content-baseline">baseline</option>
  <option value="align-content-center">center</option>
  <option value="align-content-flex-start">flex start</option>
  <option value="align-content-flex-end">flex end</option>
  <option value="align-content-space-between">space-between</option>
  <option value="align-content-space-around">space-around</option>
  <!-- <option value="align-content-space-evenly">space-evenly</option> -->
</select>
<!--- align-content - 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>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px red solid;
  width: 500px;
  height: 150px;
}

.align-content-initial {
  align-content: initial;
}
.align-content-stretch {
  align-content: stretch;
}
.align-content-baseline {
  align-content: baseline;
}
.align-content-center {
  align-content: center;
}
.align-content-flex-start {
  align-content: flex-start;
}
.align-content-flex-end {
  align-content: flex-end;
}
.align-content-space-between {
  align-content: space-between;
}
.align-content-space-around {
  align-content: space-around;
}

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

JavaScript

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