zoukankan      html  css  js  c++  java
  • CSS3 display:flex和display:box有什么区别?

    **区别**,仅是各阶段草案命名。
    - W3C 2009年第1次草案:[display:box;]()
    - W3C 2011年第2次草案:[display:flexbox | inline-flexbox;]()
    - W3C 2012年第5次草案及以后的候选推荐标准:[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)


    作者:山茶树和葡萄树
    链接:https://www.zhihu.com/question/22991944/answer/96153192
    来源:知乎
    著作权归作者所有,转载请联系作者获得授权。
     
    前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。

    后者是2009年的语法,已经过时,是需要加上对应前缀的。

    所以兼容性的代码,大致如下

        display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
        display: -moz-box; /* Firefox 17- */
        display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
        display: -moz-flex; /* Firefox 18+ */
        display: -ms-flexbox; /* IE 10 */
        display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    如果要说区别,display:box; 是老规范,要兼顾古董机子就加上它。
    flexbox flex 是新规范,老机子不支持的。

    其实要使多浏览器兼容flexbox容器样式,可以使用如下CSS样式进行定义:
    .flex-container {
      display: -moz-box;  /* Firefox */ 
      display: -ms-flexbox;    /* IE10 */ 
      display: -webkit-box;    /* Safari */  
      display: -webkit-flex;    /* Chrome, WebKit */ 
      display: box;  
      display: flexbox;  
      display: flex;   
       100%;  
      height: 100%;  
      background-color: gray;
    }

    父元素设置display:flex后,子元素宽度会随父元素宽度的改变而改变,display:box不会。

  • 相关阅读:
    Spring MVC 复习笔记03
    Spring MVC 复习笔记02
    CSS之选择器
    Filedset
    Label标签
    Table标签
    列表标签
    CSS之img标签
    CSS之a标签锚点
    CSS之checkbox&radio&textarea&select
  • 原文地址:https://www.cnblogs.com/Trr-984688199/p/6189338.html
Copyright © 2011-2022 走看看