<div id="container">
<div class="item">111</div>
<div class="item">22222222</div>
<div class="item">33</div>
<div class="item">4444</div>
</div>
<input type="radio" name="direction" value="row">row
<input type="radio" name="direction" value="row-reverse">row-reverse
<br>
<input type="radio" name="direction" value="column">column
<input type="radio" name="direction" value="column-reverse">column-reverse
<br>
<input type="radio" name="direction" value="none" checked>display: none
#container {
background-color: orange;
}
.item {
background-color: dodgerblue;
color: white;
}
div {
border: 2px solid black;
padding: 10px;
box-sizing: border-box;
}
.flex {
display: flex;
}
.row {
flex-direction: row;
}
.row-reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column-reverse {
flex-direction: column-reverse;
}
$("input:radio[name=direction]").click(function() {
var flexDirection = $('input[name="direction"]:checked').val();
$("#container").removeAttr("class");
if(flexDirection != "none") {
$("#container").addClass('flex').addClass(flexDirection);
}
});
External CSS
This Pen doesn't use any external CSS resources.