Edit in JSFiddle

<input type="radio" name="flex" id="one" checked><label for="one">2: margin-right:auto</label> 

<input type="radio" name="flex" id="two"><label for="two">3: margin-right:auto</label> 

<input type="radio" name="flex" id="three"><label for="three">2: margin-left:auto</label>

<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;
	
    background: #9ba5b3; padding: 5px; margin-top:1em;
}
.itm{ background: #2e5b61; font-size: 2.5rem; color: #eee; margin: 5px; padding: 15px; }

#one:checked ~ .flex .itm2{ margin-right:auto }
#two:checked ~ .flex .itm3{ margin-right:auto }

#three:checked ~ .flex .itm2{ margin-left:auto }