-webkit-box-flex：1;與顯示器一起使用時不起作用：-webkit-flex;

我使用新的display: -webkit-flex;語法來定義'flexboxes'，但我無法獲得-webkit-box-flex: 1;的效果，所以元素會佔用剩餘的空間。-webkit-box-flex：1;與顯示器一起使用時不起作用：-webkit-flex;

當我使用display: box;，舊的語法，它工作正常（例如http://flexiejs.com/playground/）。我可以使用建議，鉻支持新標準（http://flexiejs.com/playground/）。

在Firefox正常工作（不能在IE瀏覽器現在測試）

這裏是我的示例代碼（Fiddle）：

<html> 
<head> 
    <title>Test</title> 
    <script src="modernizr.min.js"></script> 
    <style> 
     .wrapper { 
      /* old syntax */ 
      display: -webkit-box; 
      display: -moz-box; 
      /* new syntax */ 
      display: -webkit-flex; 
      display: -moz-flex; 
      display: -o-flex; 
      display: -ms-flex; 
      display: flex; 
      border: 1px solid; 
     } 

     html, body, .wrapper { 
      width: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     .element { 
      border: 1px solid black; 
      margin: 10px; 
      padding: 10px; 
      min-width: 300px; 
      -moz-box-flex: 1; 
      -webkit-box-flex: 1; 
      box-flex: 1; 
     } 

     .no-flexbox .wrapper .element { 
      float: left; 
      width: 300px; 
     } 

     .no-flexbox .wrapper .clear { 
      clear: both; 
     } 

     .flexbox .wrapper .clear { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="element"> 
      <h1>hello world</h1> 
      <p> 
       Lorem ipsum<br /> 
       Lorem ipsum 
      </p> 
      <p>Lorem ipsum</p> 
     </div> 
     <div class="element"> 
      <h1>hello world</h1> 
      <p> 
       Lorem ipsum 
      </p> 
      <p>Lorem ipsum</p> 
     </div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

來源

2013-04-30 Stefan

不同Flexbox的語法並不互相兼容。 – BoltClock 2013-04-30 08:51:39

感謝@BoltClock。

如果我使用display：-webkit-flex;我當然必須用-webkitx-flex: 1;代替-webkit-box-flex: 1;！

代碼更新（Fiddler）：

<html> 
<head> 
    <title>Test</title> 
    <!-- Library zum erkennen von html5 features --> 
    <script src="modernizr.min.js"></script> 
    <style> 
     /*Elemente im wrapper werden nebeneinader angeordnet*/ 
     /*da es nicht nicht fertig standardisert ist, gibt es pro browser eine andere schreibweise, 
      "display: flex;" ist die aktuellste und jene die in zukunkft alle verweneden sollten*/ 
     .wrapper { 
      /* old syntax */ 
      display: -webkit-box; 
      display: -moz-box; 
      /* new syntax */ 
      display: -webkit-flex; 
      display: -moz-flex; 
      display: -o-flex; 
      display: -ms-flex; 
      display: flex; 
      border: 1px solid; 
     } 

     html, body, .wrapper { 
      width: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     .element { 
      border: 1px solid black; 
      margin: 10px; 
      padding: 10px; 
      min-width: 300px; 
      -moz-box-flex: 1; 
      -webkit-flex: 1; 
      -moz-flex: 1; 
      -ms-box-flex: 1; 
      box-flex: 1; 
      flex: 1; 
     } 

     /* no-flexbox wird von modernizr hinzugefügt wenn flex nicht utnerstützt ist*/ 
     .no-flexbox .wrapper .element { 
      float: left; 
      width: 300px; 
     } 

     .no-flexbox .wrapper .clear { 
      clear: both; 
     } 
     /* flexbox wird von modernizr hinzugefügt wenn flex nicht utnerstützt ist*/ 
     /* clear tag wird nicht benötigt, da elemente mit flexbox angeordnet sind */ 
     .flexbox .wrapper .clear { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="element"> 
      <h1>hello world</h1> 
      <p> 
       Lorem ipsum<br /> 
       Lorem ipsum 
      </p> 
      <p>Lorem ipsum</p> 
     </div> 
     <div class="element"> 
      <h1>hello world</h1> 
      <p> 
       Lorem ipsum 
      </p> 
      <p>Lorem ipsum</p> 
     </div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

來源

2013-04-30 08:58:48 Stefan

-webkit-box-flex：1;與顯示器一起使用時不起作用：-webkit-flex;

回答

相關問題