使用Taro v3.0.0-beta.3运行在百度小程序中flex：1不生效

[wkh2]

问题描述

复现步骤

或者你们随便写一个view，包含两个子块，然后设置一个块flex 1 即可复现。

/**
 * 这段注释后可以贴代码
 * 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间
 * 代码提供不全或代码格式混乱的 issues 【有可能会被忽略】
 * 
 * 查看如何插入代码：https://coding.net/help/doc/project/markdown.html#i-5
 */
<View style={{display: 'flex'}}>
<View style={{flex: 1}}>
<Text>我是左边</Text>
</View>
<View style={{width: ''80px}}>
<Text>我是右边</Text>
</View>
</View>

期望行为

期望左边flex 1撑开左侧
期望效果如图

报错信息

无报错，百度小程序中不生效

系统信息

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[wkh2]

截图中的2 设置flex 1 ,诉求要撑开，但是没有效果

[yuche]

百度小程序本身对 flex 布局支持不好，你可以尝试一下如果使用原生百度小程序写一个相同的布局，看一下是否可用

[wkh2]

百度小程序本身对 flex 布局支持不好，你可以尝试一下如果使用原生百度小程序写一个相同的布局，看一下是否可用

试过taro 1.3.4版本的项目，是可以正常的。

[yuche]

你换成 css 而不是 inline style 看一下可用吗

[Chen-jj]

@wkh2 Taro3 使用了 template 进行 xml 结构递归。这问题是因为百度的 template 标签不是虚拟的，而是真实 DOM 节点，所以 flex 崩了。我们再跟百度方面反馈下，这里你可能要用 float 等做布局了。

[yang4515]

有结果了吗

[rvean]

正式版 3.0.2 了，flex: 1; 还是失效哦

[Chen-jj]

@rvean 这需要百度小程序团队去修复，他们正在升级渲染架构，应该不久后会得以修复。

[molunhui]

都2021了，还是没有进展吗 😓

[bluescurry]

请问目前有进展吗，目前的解决方法除了float布局，还有别的临时方案吗，flex 布局是一个太通用的方案了，把这个毙了相当于无法编译百度小程序一样。。。 @Chen-jj

[paulloo]

https://smartprogram.baidu.com/forum/topic/show/127164

百度那边，说原生完好，要框架端解决。悬而未决，只能用float代替了嘛？ 几百个地方，心累~~

[bluescurry]

百度不解决，taro 也不打算解决了吗，那百度小程序不就相当于不支持了吗。。。

[ivan-94]

有进展吗

[voyageh]

不支持百度了吗？

[Chen-jj]

缓慢推进中。。

[TomVista]

同样因为这个问题，一些css选择器也不能正常使用 > nth-child

[SyMind]

确实是百度小程序 template 标签渲染的问题，但是我想可以先使用一种临时的启发式的方案解决，从而能够使 view 正常地进行 flex 布局。

1. 首先百度小程序忽略 pure-view 和 static-view 类型的优化，全部使用 view。
2. 渲染 view 的 template 判断如果子组件仍为 view 则非递归地渲染，例如允许非递归渲染深度为 10，深度超过后再次调用模板进行递归渲染，此时重置非递归渲染深度。
3. 为了能够在开发时显式地重置非递归深度，当判断 view 标签无 class 属性、无 style 属性时，进行递归渲染，重置非递归渲染深度。

虽然只能解决 view 使用 flex 布局异常的 case，嵌套或使用其他标签仍然会存在问题，但按照我个人平时的开发经验来看 view 支持 flex 布局已经可以覆盖平时大部分的 case（或许嵌套 text 标签也很常见需要考虑，但我没有想好），其余少部分 case 由开发者变更为 view 标签、使用 view 标签包裹、使用其它布局等方式特殊处理即可。

@Chen-jj 我随后将 pull 代码。

[TomVista]

同样因为这个问题,cover-view 的嵌套,会导致cover-view 内部的cover-view 不显示,其他cover元素同理

[SyMind]

@TomVista 那看起来在百度小程序中 cover-view 的嵌套也需要进行特殊处理，但是当前看起来 taro 团队对从框架层面解决这些问题的兴趣不大。说实话，我个人也挺失落的，百度小程序团队和 taro 团队相互踢皮球。

[xiao-shanfeng]

什么时候给解决啊，如果大版本修复的话，最起码现在官方给出个解决方案啊

[youmengme]

我发现设置这个全局样式也可以解决这个问题。
taro 3.3.1修复了view > view的flex传递问题，但是好像没有修复view > image的flex问题，下面这个代码可以同时解决这两个问题。

swan-template {
  display: contents;
}

[sunpm]

我发现设置这个全局样式也可以解决这个问题。 taro 3.3.1修复了view > view的flex传递问题，但是好像没有修复view > image的flex问题，下面这个代码可以同时解决这两个问题。

swan-template {
  display: contents;
}

我taro 3.1.0-beta.12 按你这种办法也能解决大部分问题，但是Swiper水平方向轮播会有问题

[SyMind]

@youmengme cool!

[moyafaxi]

@sunpm 也是Swiper水平方向轮播有点问题，有办法解决么

[xixilalaha]

@moyafaxi 麻烦问下这个你解决了么

[moyafaxi]

swan-swiper swan-template {
display: block;
}
@xixilalaha 暂时这样解决了

[xixilalaha]

@moyafaxi 我也是这样处理了，麻烦了

[hisanshao]

@Chen-jj 3.5.7+ kwai2.0.0 快手小程序也还是有这个问题

[markchenlife]

@Chen-jj 3.5.7+ kwai2.0.0 快手小程序也还是有这个问题

快手的这个问题还存在，不知道有没有解决方案

[Chen-jj]

@Chen-jj 3.5.7+ kwai2.0.0 快手小程序也还是有这个问题

快手的这个问题还存在，不知道有没有解决方案

@markchenlife 可以新建一个 issue，我们跟进一下

[markchenlife]

我发现设置这个全局样式也可以解决这个问题。 taro 3.3.1修复了view > view的flex传递问题，但是好像没有修复view > image的flex问题，下面这个代码可以同时解决这两个问题。

swan-template {
  display: contents;
}

我taro 3.1.0-beta.12 按你这种办法也能解决大部分问题，但是Swiper水平方向轮播会有问题

请问一下快手小程序也可以这么解决么？

[yoyo837]

直接自己试一下