<div id="container">
<div class="item">111</div>
<div class="item">2222222<br>222222</div>
<div class="item" style="font-size:40px;">33g</div>
<div class="item">4444</div>
</div>
<input type="radio" name="align-items" value="stretch" checked>stretch
<br>
<input type="radio" name="align-items" value="baseline">baseline
<input type="radio" name="align-items" value="center">center
<br>
<input type="radio" name="align-items" value="flex-start">flex-start
<input type="radio" name="align-items" value="flex-end">flex-end
#container {
display: flex;
flex-direction: row;
background-color: orange;
height: 200px;
}
.item {
background-color: dodgerblue;
color: white;
}
div {
border: 2px solid black;
padding: 0px 10px;
box-sizing: border-box;
}
.baseline {
align-items: baseline;
}
.center {
align-items: center;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}$('input:radio[name="align-items"]').click(function() {
var alignItems = $('input:radio[name="align-items"]:checked').val();
console.log(alignItems);
$('#container').removeAttr("class");
if(alignItems != "stretch") {
$('#container').addClass(alignItems);
}
})
External CSS
This Pen doesn't use any external CSS resources.