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

转载于:https://www.cnblogs.com/baqiphp/p/7463492.html

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

微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员定义布局:display:flex flex容器的属性: 一.flex-direction: ...
微信小程序学习笔记④——Flex布局[实战样例之画骰子]
✅ 关于 Flex,很多优秀的前辈已经总结过了,比如:阮一峰的<Flex 布局教程:语法篇>.知乎林东洲的<30 分钟学会 Flex 布局>等等.他们主要是基于网页的,小辈斗胆 ...
微信小程序开发之——flex布局
打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码. flex-direction flex-direction属性表示布局的方向有两个值: row | column 默认属性是 ...
image 微信小程序flex_微信小程序进阶－flex布局
对于一个后端程序员来说最麻烦的就是布局了,今天就介绍下小程序的布局,介绍一种高效的小程序布局方案.笔者之前也做过native app的布局,对比下来,小程序的布局没有native那么灵活,毕竟goog ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
区分微信小程序版本（开发工具中、开发版、体验版、正式版）的方法？
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...
微信小程序更新二维数组中的对象或数组的属性值
微信小程序更新二维数组中的对象或数组的属性值,这里可能有两种情况 1.微信小程序更新二维数组中的对象的属性值更新二维数组中的某个对象的属性值,代码如下 js 代码 data: {familys:[{ ...
微信小程序全局配置文件app.json中window:backgroundColor“不生效”
那些年我们一起踩过的坑~ 今天说一下微信小程序全局配置文件app.json中window的backgroundColor属性,设置之后发现没效果. 查了资料发现原来这个backgroundColor属 ...

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

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

最新文章

热门文章