小程序为什么 Upload 外层使用 display: flex 时会造成组件样式混乱

Upload 是基于 TGrid 宫格实现,当外层使用 display: flex ,子元素会默认加上 flex-grow: 0,造成 Upload 组件整体宽度不足。可以通过给 Upload 组件节点加上 flex-grow: 1 处理。

例如

javascript 复制代码
<view class="images">
<view class="imageTitle">场地图片:</view>
<view class="img" style="flex-grow:1;">
<view class="image">
  <t-upload
    mediaType="{{['image']}}"
    max="{{1}}"
    files="{{fileList}}"
    bind:add="handleAdd"
    bind:remove="handleRemove"
    
   >
  </t-upload>
</view>
<view class="image">
  <t-upload
    mediaType="{{['image']}}"
    max="{{1}}"
    files="{{fileList}}"
    bind:add="handleAdd"
    bind:remove="handleRemove"
  >
  </t-upload>
</view>
</view>
</view>
 

wxss文件
.images{
  display: flex;
  margin-left:20rpx;
}
.imageTitle{
  display: flex;
  align-items: center;
}
.image{
  text-align: center;
  margin-top:10rpx;
}
相关推荐
三天不学习9 小时前
Tailwind CSS 快速入门(2026 版):从 v4 零配置上手,到「该不该用、怎么用好」的选型实战
前端·css·tailwind
htzyl2069 小时前
前端阶梯——第九章、颜色、文本与背景
前端·css
htzyl2069 小时前
前端阶梯——第八章、CSS入门与选择器
前端·css
JYeontu14 小时前
实现一个「曲线滑块验证」功能
前端·javascript·html
IMPYLH15 小时前
HTML 的 <tr> 元素
前端·html
IMPYLH17 小时前
HTML 的 <track> 元素
前端·html
用户298698530142 天前
Python 中 HTML 转 PDF 的实现方法
python·html·api
传人2 天前
页面中心圆圈放大效果如何写
前端·css
我就是不信2 天前
用 C 语言实现一个支持 HTML 与视频的 HTTP(S) 服务器
c语言·html·音视频
被摘下的星星2 天前
CSS 基础说明
前端·css