<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="justify-content" value="flex-start" checked>flex-start
<input type="radio" name="justify-content" value="flex-end">flex-end
<br>
<input type="radio" name="justify-content" value="center">center
<input type="radio" name="justify-content" value="space-between">space-between
<br>
<input type="radio" name="justify-content" value="space-around">space-around
<input type="radio" name="justify-content" value="space-evenly">space-evenly#container {
display: flex;
background-color: orange;
}
.item {
background-color: dodgerblue;
color: white;
}
div {
border: 2px solid black;
padding: 10px 0px;
box-sizing: border-box;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.space-evenly {
justify-content: space-evenly;
}$('input:radio[name="justify-content"]').click(function() {
var justifyContent = $('input[name="justify-content"]:checked').val();
$('#container').removeAttr("class");
if(justifyContent != "flex-start") {
$('#container').addClass(justifyContent);
}
})
External CSS
This Pen doesn't use any external CSS resources.