首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> 
<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>
<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>

代码编辑器：

运行结果：