今天在用微信小程序做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; }