在线运行代码 - 菜鸟教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(cainiaoplay.com)</title>
<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="selected" />baseline
  <option />center
  <option />end
  <option />inherit
  <option />start
  <option />stretch
</select>

<p><b>注意:</b> 这个实例在 Opera,或 Internet Explorer 9以及更早版本的浏览器中不兼容</p>

</body>
</html>
源代码

动行结果
