Edit in JSFiddle

<b>align-self:</b> <input type="radio" name="flex" id="one"><label for="one">no</label>

<input type="radio" name="flex" id="two" checked><label for="two">.item3{ align-self: center; } и .item4{ align-self: flex-end; }</label>

<br><br>

<div class="flex">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</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;
	align-items: flex-start;
    
    background: #9ba5b3; padding: 5px; width: 315px; height: 150px;
}

.item {
    background: #2e5b61; font-size: 2.5rem; margin: 5px; padding: 15px; color: #eee;
}

#two:checked ~ .flex .item3 { align-self: center; }
#two:checked ~ .flex .item4 { align-self: flex-end; }