[小结] flexbox
总结一些需要注意的点：
1. 不要忘记写 html, body {margin:0; height:100%;}，否则 outer 的 height:100%就不会有效果。
2. 给body设置box-sizing:border-box;可以让padding也包含在height里。
3. box的子元素是默认横向（horizontal）排列的，此时，box-pack是负责横向左中右对齐，box-align是负责竖向上中下对齐的。
当将box-orient:vertical时，是纵向排列，此时，box-pack是负责上中下对齐，而box-align负责左中右对齐。相当于旋转了90度。
4.
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
html,body {margin:0; height:100%;padding:20px; -webkit-box-sizing:border-box;}
.outer {
display:-webkit-box;
height:100%;
}
.outer div:nth-child(1){
-webkit-box-flex:1;
border:10px #eee solid;
margin-right:10px;
border-radius:10px;
}
.outer div:nth-child(2){
-webkit-box-flex:2;
border:10px #eee solid;
margin-right:10px;
border-radius:10px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
}
.outer div:nth-child(3){
-webkit-box-flex:1;
border:10px #eee solid;
border-radius:10px;
}
</style>
</head>
<body>
<div class="outer">
<div></div>
<div>123</div>
<div></div>
</div>
</body>
