Edit in JSFiddle

<b>flex-direction:</b>
<input type="radio" name="direction" id="row" checked><label for="row">row</label>
<input type="radio" name="direction" id="column"><label for="column">column</label>

<br>
<b>flex-wrap:</b>
<input type="radio" name="flex" id="nowrap" checked><label for="nowrap">nowrap</label>
<input type="radio" name="flex" id="wrap"><label for="wrap">wrap</label>
<input type="radio" name="flex" id="wrap-reverse"><label for="wrap-reverse">wrap-reverse</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 class="flex-itm">4</div>
    <div class="flex-itm">5</div>
    <div class="flex-itm">6</div>
</div>
body{ padding:1em; font-family:arial; }
input{ display:none; }
label{ padding:.2em .5em; }
input:checked + label{ font-weight:bold; background:#ccc; }

.flex {
	display: flex;
    width: 325px;
	background: #9ba5b3; padding: 5px;
}
.flex-itm { background: #2e5b61;    font-size: 2.5rem;    color: #eee;    margin: 5px;    padding: 15px; }

#row:checked ~ .flex {  }
#column:checked ~ .flex { flex-direction: column;     height: 300px; }
#nowrap:checked ~ .flex { flex-wrap: nowrap; }
#wrap:checked ~ .flex { flex-wrap: wrap; }
#wrap-reverse:checked ~ .flex { flex-wrap: wrap-reverse; }