这几天在研究弹性布局，看书中写的是display:box，结果在chrome浏览器中是正常的，想着移动端大部分浏览器也是webkit内核的应该也没啥问题，结果确实没问题，但仔细一看，高度呢？好吧，严重的bug，高度不起作用了（特殊情况）。再查查资料原来w3c已经废了display:box;换成display:flex了，只好重新学过了，以后还是看这个吧http://www.w3schools.com/国外站请自备神器。
UC啥的浏览器用的还是display:box最新的是display:flex，所以移动端还得写两份。当然你也可以使用flex.css库它已经帮你解决兼容性了，但项目小的话还是自己写吧。
下面是写的小dome。
使用box-align需要配合box-orient使用
box-align属性是在相反方向的轴线上发生作用的。如果box-orient设置为horizontal，box-align就会把空间分配在垂直轴上，反之亦然。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒模型</title>
<link rel="stylesheet" href="box-dome.css">
</head>
<body>
<!-- display:box; -->
<section id="test_1">
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section>
<!-- 平分 -->
<section id="test_2">
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section>
<!-- 左右1份中间3份 -->
<section id="test_3">
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section>
<!-- 第一个固定，其他自适应 -->
<section id="test_4">
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section>
<!-- box-orient:vertical; -->
<section id="test_5">
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section>
<!-- box-orient:horizontal; -->
<section id="test_6">
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section>
<!-- box-direction:reverse; -->
<section id="test_7">
<p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>2 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>3 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section>
<!-- box-ordinal-group:number; -->
<section id="test_8">
<p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>2 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
<p>3 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section> <!-- 使用box-align需要配合box-orient使用 --> <!-- orient-horizontal -- align-end -->
<section id="test_9">
<p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
</section>
<!-- orient-horizontal -- align-center -->
<section id="test_10">
<p>另外要注意的事情</p>
</section>
<!-- orient-vertical -- align-center -->
<section id="test_11">
<p>另外要注意的事情</p>
</section>
<!-- orient-vertical -- align-center -->
<section id="test_12">
<p>另外要注意的事情</p>
</section>
<!-- 水平垂直居中 -->
<section id="test_13">
<div>
<p>另外要注意的事情</p>
</div>
</section>
</body>
</html>
/* webkit-box */
#test_1{
display:-webkit-box; width:600px;
}
#test_1>p{
width:200px;
margin:0 10px;
text-align:justify;
}
#test_1>p::after{
content:'';
display:inline-block;
width:100%;
} /* 平分 */
#test_2{
display:-webkit-box; outline:1px solid #ccc;
}
#test_2>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
} /* 左右1份中间3份 */
#test_3{
display:-webkit-box; outline:1px solid #ccc;
}
#test_3>p{
-webkit-box-flex:; width:100px; margin:10px;
border-right:1px solid #ccc;
}
#test_3>p:first-child+p{
-webkit-box-flex:;
} /* 第一个固定，其他自适应 */
#test_4{
display:-webkit-box; outline:1px solid #ccc;
}
#test_4>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
}
#test_4>p:first-child{
-webkit-box-flex:; width:100px;
} /* box-orient:vertical; */
#test_5{
display:-webkit-box;
-webkit-box-orient:vertical; width:500px;
outline:1px solid #ccc;
}
#test_5>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
} /* box-orient:horizontal;水平 */
#test_6{
display:-webkit-box;
-webkit-box-orient:horizontal; width:500px;
outline:1px solid #ccc;
}
#test_6>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
} /* box-direction:reverse;垂直 */
#test_7{
display:-webkit-box;
-webkit-box-direction:reverse; width:500px;
outline:1px solid #ccc;
}
#test_7>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
} /* box-ordinal-group:number; */
#test_8{
display:-webkit-box; width:500px;
outline:1px solid #ccc;
}
#test_8>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
}
#test_8>p:first-child{
-webkit-box-ordinal-group:;
}
#test_8>p:first-child+p{
-webkit-box-ordinal-group:;
}
#test_8>p:last-child{
-webkit-box-ordinal-group:;
} /* 使用box-align需要配合box-orient使用 */ /* orient-horizontal -- align-end */
#test_9{
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:end; height:100px;
outline:1px solid #ccc;
}
#test_9>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
} /* orient-horizontal -- align-center */
#test_10{
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:center; height:100px;
outline:1px solid #ccc;
}
#test_10>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
} /* orient-vertical -- align-center */
#test_11{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-align:end; height:100px;
outline:1px solid #ccc;
}
#test_11>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
} /* orient-vertical -- align-center */
#test_12{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-align:center; height:100px;
outline:1px solid #ccc;
}
#test_12>p{
-webkit-box-flex:; margin:10px;
border-right:1px solid #ccc;
} /* 水平垂直居中 */
#test_13{
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:center; height:100px;
outline:1px solid #ccc;
}
#test_13>div{
-webkit-box-flex:;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-align:center; margin:10px;
/*margin:0 auto;*/
}