0

我仔细阅读了这个stackoverflow主题

以及csstricks中的这篇文章

并尝试使用 all 前缀使我的布局在现代浏览器中工作，但它只在 Chrome 中工作。在其他浏览器中，flex 项目丢失了 flex 值（宽度）。我不明白这是怎么回事。
我非常感谢和帮助和建议！谢谢！ 演示

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>nested flex</title>
</head>
<body>
  <header>Привет мир!</header>
  <div class="wrap">
    <div class="item1">red</div>
    <div class="item_nested">
    <div class="b">blue</div>
    <div class="c">green</div>
  </div>
    </div>
  <footer>Прощай мир!</footer>

</body>
</html>



.wrap { 
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%; 
  -moz-box-orient: horisontal;
  -webkit-flex-flow: row wrap; 
        -ms-flex-flow: row wrap;
  flex-flow: row wrap;
   max-width: 1200px;
}
.item1 { 
   width: 70%;                     /* No flex here, 
  -moz-box-flex: 1;               /* OLD - Firefox 19- */

  background: #eee;
}
.b { 
  background: #ddd; height:50%;

}
.c { 
  background: #ccc; height:50%;
}
.item_nested {
    -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;               /* OLD - Firefox 19- */
  width: 20%;                     /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;                /* Chrome */
  -ms-flex: 1;                    /* IE 10 */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
@media all and (max-width: 600px) {
  .wrap {-moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
 }
  .wrap > .a, .wrap > .item_nested {width: auto;} 
  .b.c {
    height:auto;
  }

    .item1 { 
   width: 100%; 
}

}

4

0 回答 0