微信小程序（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;
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。