CSS3 display：flex和display：box有什么区别?
CSS3 display：flex和display：box有什么区别
慕的地6264312浏览 579回答 1
1回答
-
犯罪嫌疑人X
恩恩，首先'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的新属性，去了下弹性盒子模型。以上是自己的一点拙见，欢迎批评指正。希望能够帮助到你，望采纳。
随时随地看视频慕课网APP
相关分类
CSS3