Edit in JSFiddle

<b>flex-basis:</b>
<input type="radio" name="flex" id="one" checked><label for="one">auto auto auto auto </label>

<input type="radio" name="flex" id="two"><label for="two">50% auto auto auto </label>

<input type="radio" name="flex" id="three"><label for="three">50% 50% auto auto</label>

<input type="radio" name="flex" id="four"><label for="four">50% 50% 50px 100px</label>

<br><br>

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


#two:checked ~ .flex .itm1{ flex-basis: 50%; }

#three:checked ~ .flex .itm1{ flex-basis: 50%; }
#three:checked ~ .flex .itm2{ flex-basis: 50%; }

#four:checked ~ .flex .itm1{ flex-basis: 50%; }
#four:checked ~ .flex .itm2{ flex-basis: 50%; }
#four:checked ~ .flex .itm3{ flex-basis: 50px; }
#four:checked ~ .flex .itm4{ flex-basis: 100px; }