CSS3 display：flex和display：box有什么区别
1 回答
犯罪嫌疑人X
TA贡献2080条经验 获得超4个赞
恩恩，首先'box'呐是比较早的语法，使用它时需要带上前缀，比如 display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */，而"flex"是2012年的语法，是css3新规定的，也将是以后标准的语法。
至于实际中的用法，举个例子：
1234567891011121314151617181920212223242526272829303132333435363738<!DOCTYPE html><html><head><style> div{ display:-webkit-box; /* Safari and Chrome */display:box;width:300px;border:1px solid black;} #p1{-webkit-box-flex:1.0; /* Safari and Chrome */box-flex:1.0;border:1px solid red;} #p2{-webkit-box-flex:2.0; /* Safari and Chrome */box-flex:2.0;border:1px solid blue;}</style></head><body> <div><p id="p1">Hello</p><p id="p2">World</p></div></body></html>
运行结果：
将父元素的display属性设置为-webkit-box（box），然后子元素通过属性box-flex来指定一个框的子元素是否是灵活的或固定的大小，如上，定义两个灵活的p元素。如果父级box的总宽度为300px，＃P1将有一个100px的宽度，＃P2将有一个200px的宽度，也就是呈固定比例划分，多看看css3的新属性，去了下弹性盒子模型。
以上是自己的一点拙见，欢迎批评指正。
希望能够帮助到你，望采纳。
- 1 回答
- 0 关注
- 573 浏览
添加回答
举报
0/150
提交
取消