Примеры Flex - flex-basis для разных осей

Для статьи о Flex - https://wp-kama.ru/?p=8045

by Timur Kamaev

HTML

<input type="radio" name="key" id="row" checked><label for="row">row</label>
<input type="radio" name="key" id="column"><label for="column">column</label>

<br><br>

<div class="flex">
	<div class="item">1</div>
	<div class="item">2</div>
</div>

CSS

body{ font-family:arial; padding:20px; }

.flex{
	display: flex;
	
	max-width: 600px; /* макс ширина блока */
	margin: 0 auto; /* выравниваем блок по центру */
	background:#628694;
	align-items:flex-start;
}
.item{ padding:20px; background:#b5ced8; font-size:200%; text-align:center; margin:10px; }
.item:nth-child(1){ flex:0 0 50px; }
.item:nth-child(2){ flex:0 0 100px;  }

#column:checked ~ .flex{ flex-direction:column; }