微信小程序（safair浏览器）flex布局中的坑

今天在用微信小程序做flex布局的时候遇到了一些问题。

布局简单来说是这样的，最外层是一个flex布局属性为flex-direction:column的元素。里面有未设置height，并且flex-grow:1的子元素，然后在这子元素里，有一个孙子元素height:100%;

html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    html,
    body {
      height: 100%;
    }

    .a {
      height: 100%;
      width: 100%;
      background: red;
      display: flex;
    }

    .b {
      flex-grow: 1;
      background: yellow;
    }

    .c {
      height: 100%;
      background: yellowgreen;
    }
  </style>
</head>

<body>
  <div class="a">
    <div class="b">
      <div class="c">
      </div>
    </div>
  </div>
</body>

</html>

　　在其他小程序安卓机和开发者工具中，这种代码可行的，能够撑满整个屏幕，在小程序的苹果真机和safair浏览器中，这样写会直接导致c（孙子）元素没有任何高度。

所以我们需要把b（儿子）元素设置为flex，然后把c元素设置为flex-grow:1，才能像我们预想的一样，撑满整个屏幕

css代码如下：

 .b {
      flex-grow: 1;
      display: flex;
      background: yellow;
    }

    .c {
      flex-grow: 1;
      background: yellowgreen;
    }

 

posted @ 2017-09-01 15:34  这名字就是霸气  阅读(2244)  评论(1)  编辑  收藏  举报