CSS Flexbox - justify-content

CSS Flexbox - justify-content

by vinn_aspire

HTML

<!--- justify-content - start-->
<h1> justify-content</h1>
<h3> normal |center |left | right | stretch | baseline | start | end | flex-start | flex-end | space-around | space-between | space-evenly </h3>
<select name="justifyContent" id="justifyContent" onchange="setFlexboxClass(this.value)">
  <option disabled="disabled" value="select option">select any option</option>
  <option value="justify-content-normal">normal</option>
  <option value="justify-content-stretch">stretch</option>
  <option value="justify-content-center">center</option>
  <option value="justify-content-start">start</option>
  <option value="justify-content-baseline">baseline</option>
  <option value="justify-content-flex-start">flex start</option>
  <option value="justify-content-flex-end">flex end</option>
  <option value="justify-content-space-around">space around</option>
  <option value="justify-content-space-between">space between</option>
  <option value="justify-content-space-evenly">space evenly</option>
  <option value="justify-content-space-between">space between</option>
</select>
<!--- justify-content - end-->
<br />
<hr />
<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;
  border: 1px red solid;
  height: 150px;
  width: 800px;
}

/* justify-content property - start
normal|stretch|center|start|end|flex-start|flex-end|baseline|space-between|space-around|space-evenly|left||right
*/

.justify-content-normal {
  justify-content: normal;
}
.justify-content-stretch {
  justify-content: stretch;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-start {
  justify-content: start;
}
.justify-content-end {
  justify-content: end;
}
.justify-content-flex-start {
  justify-content: flex-start;
}
.justify-content-flex-end {
  justify-content: flex-end;
}
.justify-content-baseline {
  justify-content: baseline;
}
.justify-content-space-between {
  justify-content: space-between;
}
.justify-content-space-around {
  justify-content: space-around;
}
.justify-content-space-evenly {
  justify-content: space-evenly;
}
.justify-content-left {
  justify-content: left;
}
.justify-content-right {
  justify-content: right;
}
/* justify-content 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

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