Edit in JSFiddle

<b>justify-content:</b>
<input type="radio" name="flex" id="flex-start" checked><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="space-between"><label for="space-between">space-between</label>

<input type="radio" name="flex" id="space-around"><label for="space-around">space-around</label>

<input type="radio" name="flex" id="space-evenly"><label for="space-evenly">space-evenly</label>

<br><br>
    
<div class="flex">
    <div class="flex-itm">1</div>
    <div class="flex-itm">2</div>
    <div class="flex-itm">3</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;
	
	background: #9ba5b3;     padding: 5px;
}
.flex-itm {  background: #2e5b61;  font-size: 2.5rem;     color: #eee;     margin: 5px;     padding: 15px; }

#flex-start:checked ~ .flex {    justify-content: flex-start; }
#flex-end:checked ~ .flex {      justify-content: flex-end; }
#center:checked ~ .flex {        justify-content: center; }
#space-between:checked ~ .flex { justify-content: space-between; }
#space-evenly:checked ~ .flex { justify-content: space-evenly; }
#space-around:checked ~ .flex {  justify-content: space-around; }