-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

Благодаря @BoltClock.

Если я использую дисплей: -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;

ответ

Смежные вопросы