Примеры Flex - изменение главной оси

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

by Timur Kamaev

HTML

<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>



<div class="flex">
    <div class="flex-itm">1</div>
    <div class="flex-itm">2</div>
    <div class="flex-itm">3</div>
</div>

CSS

body{ padding:1em; font-family:arial; }

.flex {
    background: #a55;
    padding: 5px;
    display: flex;
	justify-content: center;
}
.flex-itm {
    background: #5a5;
    font-size: 2.5rem;
    color: #eee;
    margin: 5px;
    padding: 15px;
}

#row:checked ~ .flex {
    width: 325px;
}

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