<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="wrap" value="wrap">wrap
<input type="radio" name="wrap" value="wrap-reverse">wrap-reverse
<br>
<input type="radio" name="wrap" value="nowrap" checked>기본값 : nowrap
#container {
display: flex;
background-color: orange;
width: 230px;
}
.item {
background-color: dodgerblue;
color: white;
}
div {
border: 2px solid black;
padding: 10px;
box-sizing: border-box;
}
.wrap {
flex-wrap: wrap;
}
.wrap-reverse {
flex-wrap: wrap-reverse;
}$('input:radio[name=wrap]').click(function() {
var flexWrap = $('input[name="wrap"]:checked').val();
console.log(flexWrap);
$('#container').removeAttr("class");
if(flexWrap != "nowrap") {
$('#container').addClass(flexWrap);
}
})
External CSS
This Pen doesn't use any external CSS resources.