快捷导航
蚂蚁部落 网站首页 实例代码 CSS实例 查看内容

display:flex和display:box的区别

2018-2-4 10:51| 发布者: antzone| 查看: 276| 评论: 0|来自: 蚂蚁部落

不少朋友在学习弹性布局的时候会遇到两种语法,一种是display:flex,一种是display:box。

它俩的区别在于语法的新旧:

(1).display:box是2009年的语法版本,现在已经过时了,不推荐使用。

(2).display:flex是2012年最新修正的语法版本,浏览器支持较好,也将成为以后标准的语法。

浏览器支持:

a:3:{s:3:\"pic\";s:43:\"portal/201704/09/105202erqxrddgdorxoqq2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

比较完整的兼容性代码如下:

[CSS] 纯文本查看 复制代码
.box {
  display:-webkit-box; 
  display:-moz-box; 
  display:-webkit-flex; 
  display:-moz-flex; 
  display:-ms-flexbox; 
  display:flex; 
}

弹性布局可以参阅css3 Flex弹性布局基本语法介绍一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-2-19 15:57 , Processed in 0.094906 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部