这几天在研究弹性布局，看书中写的是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:1; margin:10px; border-right:1px solid #ccc; } /* 左右1份中间3份 */ #test_3{ display:-webkit-box; outline:1px solid #ccc; } #test_3>p{ -webkit-box-flex:1; width:100px; margin:10px; border-right:1px solid #ccc; } #test_3>p:first-child+p{ -webkit-box-flex:3; } /* 第一个固定，其他自适应 */ #test_4{ display:-webkit-box; outline:1px solid #ccc; } #test_4>p{ -webkit-box-flex:1; margin:10px; border-right:1px solid #ccc; } #test_4>p:first-child{ -webkit-box-flex:0; 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:1; 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:1; 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:1; 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:1; margin:10px; border-right:1px solid #ccc; } #test_8>p:first-child{ -webkit-box-ordinal-group:2; } #test_8>p:first-child+p{ -webkit-box-ordinal-group:1; } #test_8>p:last-child{ -webkit-box-ordinal-group:3; } /* 使用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:1; 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:1; 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:1; 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:1; 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:1; display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-align:center; margin:10px; /*margin:0 auto;*/ }