首页 > 代码库 > 被废了的display:box弹性盒模型
被废了的display:box弹性盒模型
这几天在研究弹性布局，看书中写的是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;*/}
被废了的display:box弹性盒模型
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。