<html>
<head>
<style>
.box
{
display:-ms-flexbox;
display:-moz-box;
display:-webkit-box;
display:box;
width:200px;
height:100px;
border:2px solid red;
}
</style>
<script>
function ChangeBoxAlign(x)
{
// Returns the selected option's text
var boxAlign=x.options[x.selectedIndex].text;
var div=document.getElementById("myDiv");
if (div.style.MozBoxAlign!==undefined)
{
div.style.MozBoxAlign=boxAlign;
}
else if (div.style.webkitBoxAlign!==undefined)
{
div.style.webkitBoxAlign=boxAlign;
}
else if (div.style.msFlexAlign!==undefined)
{
div.style.msFlexAlign=boxAlign;
}
else
{
alert("Your browser doesn't support this example!");
}
}
</script>
</head>
<body>
<div class="box" id="myDiv">
<b>first child</b>
<i>second child</i>
</div>
<select onchange="ChangeBoxAlign (this);" size="6">
<option selected></option>baseline
<option></option>center
<option></option>end
<option></option>inherit
<option></option>start
<option></option>stretch
</select>
<p><b>Note:</b> This example does not work in Opera, or Internet Explorer 9 and earlier.</p>
</body>
</html>