Edit in JSFiddle

<b>align-content:</b>
<input type="radio" name="flex1" id="stretch1" checked>
<label for="stretch1">stretch</label>
<input type="radio" name="flex1" id="flex-start1">
<label for="flex-start1">flex-start</label>
<input type="radio" name="flex1" id="flex-end1">
<label for="flex-end1">flex-end</label>
<input type="radio" name="flex1" id="center1">
<label for="center1">center</label>
<input type="radio" name="flex1" id="space-between1">
<label for="space-between1">space-between</label>
<input type="radio" name="flex1" id="space-around1">
<label for="space-around1">space-around</label>
<input type="radio" name="flex1" id="space-evenly1">
<label for="space-evenly1">space-evenly</label>


<br><br>

<b>align-items:</b>
<input type="radio" name="flex" id="stretch" checked>
<label for="stretch">stretch</label>
<input type="radio" name="flex" id="flex-start">
<label for="flex-start">flex-start</label>
<input type="radio" name="flex" id="flex-end">
<label for="flex-end">flex-end</label>
<input type="radio" name="flex" id="center">
<label for="center">center</label>
<input type="radio" name="flex" id="baseline">
<label for="baseline">baseline</label>



<div class="flex">
    <div class="flex-itm">1</div>
    <div class="flex-itm">2</div>
    <div class="flex-itm">3</div>
    <div class="flex-itm">4</div>
    <div class="flex-itm">5</div>
    <div class="flex-itm">6</div>
    <div class="flex-itm">7</div>
    <div class="flex-itm">8</div>
</div>
body{ padding:1em; font-family:arial; }
input{ display:none; }
label{ padding:.2em .5em; }
label:hover{ background:#ccc; cursor:pointer; }
input:checked + label{ font-weight:bold; background:#ccc; }

.flex {
    display: flex;
    flex-wrap: wrap;
	
	background: #9ba5b3; width: 315px;     height: 300px;     margin: 20px 0;  padding: 5px;
}

.flex-itm {     background: #2e5b61;    font-size: 2.5rem;     color: #eee;     margin: 5px;     padding: 15px; }
.flex-itm:nth-child(3n) {   padding: 5px 15px; }
.flex-itm:nth-child(3n+1) { padding: 20px 15px; }
.flex-itm:nth-child(3n+2) { padding: 30px 15px; }

#flex-start:checked ~ .flex {  align-items: flex-start; }
#flex-end:checked ~ .flex   {  align-items: flex-end;   }
#center:checked ~ .flex     {  align-items: center;     }
#baseline:checked ~ .flex   {  align-items: baseline;   }
#stretch:checked ~ .flex    {  align-items: stretch;    }

#flex-start1:checked ~ .flex    {   align-content: flex-start; }
#flex-end1:checked ~ .flex      {   align-content: flex-end;   }
#center1:checked ~ .flex        {   align-content: center;     }
#space-between1:checked ~ .flex {   align-content: space-between; }
#space-evenly1:checked ~ .flex  {   align-content: space-evenly;  }
#space-around1:checked ~ .flex  {   align-content: space-around;  }
#stretch1:checked ~ .flex       {   align-content: stretch;       }