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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM