FlexBox_habr flex-direction

by alantoo

HTML

<input type="radio" name="flex" id="row" checked>
<label for="row">Row</label>
<input type="radio" name="flex" id="row-reverse">
<label for="row-reverse">Row-reverse</label>
<input type="radio" name="flex" id="column">
<label for="column">Column</label>
<input type="radio" name="flex" id="column-reverse">
<label for="column-reverse">Column-reverse</label>
    
<div class="flex">
    <div class="flex-itm">1</div>
    <div class="flex-itm">2</div>
    <div class="flex-itm">3</div>
    <div class="flex-itm">4</div>
</div>

CSS

html {
    font-family: sans-serif;
}

.flex {
    background: #a55;
    margin: 20px 0;
    padding: 5px;
    
    display: flex;
}
#row:checked ~ .flex {
    flex-direction: row;
}
#row-reverse:checked ~ .flex {
    flex-direction: row-reverse;
}
#column:checked ~ .flex {
    flex-direction: column;
}
#column-reverse:checked ~ .flex {
    flex-direction: column-reverse;
}
.flex-itm {
    background: #5a5;
    font-size: 2.5rem;
    color: #eee;
    margin: 5px;
    padding: 50px;
}