CSS Flexbox - align-items

CSS Flexbox - align-items

by vinn_aspire

HTML

<!--- align-items - start-->
<h1> align-items</h1>
<h3> normal | stretch | center | start | end | flex-start | flex-end | baseline | self-start | self-end </h3>
<select name="alignItems" id="alignItems" onchange="setFlexboxClass(this.value)">
  <option disabled="disabled" value="select option">select any option</option>
  <option value="align-items-normal">normal</option>
  <option value="align-items-stretch">stretch</option>
  <option value="align-items-center">center</option>
  <option value="align-items-flex-start">flex start</option>
  <option value="align-items-flex-end">flex end</option>
  <option value="align-items-self-start">self start</option>
  <option value="align-items-self-end">self end</option>
  <option value="align-items-baseline">baseline</option>
</select>
<!--- align-items - 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 {
  width: 500px;
  border: 1px solid red;
  display: flex;
  height: 200px;
}

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

.align-items-normal {
  align-items: normal;
}
.align-items-stretch {
  align-items: stretch;
}
.align-items-center {
  align-items: center;
}
.align-items-start {
  align-items: start;
}
.align-items-end {
  align-items: end;
}
.align-items-flex-start {
  align-items: flex-start;
}
.align-items-flex-end {
  align-items: flex-end;
}
.align-items-baseline {
  align-items: baseline;
}
.align-items-left {
  align-items: left;
}
.align-items-right {
  align-items: right;
}

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

JavaScript

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