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

时间 2019-12-12

原文原文链接

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

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

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;
    }