小程序为什么 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;
}
相关推荐
dsyyyyy1101几秒前
CSS盒子模型
前端·css·css3
Ww.xh1 小时前
鸿蒙系统中HTML与Vue集成方案
vue.js·html·harmonyos
剑神一笑2 小时前
CSS Loading 动画生成器
前端·css
ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_18:(HTML 表格进阶特性与无障碍——从标题结构到屏幕阅读器适配)
前端·笔记·ui·html·音视频
晓得迷路了4 小时前
栗子前端技术周刊第 127 期 - pnpm 11.0、Remix 3 Beta Preview、Astro 6.20...
前端·javascript·css
ZC跨境爬虫5 小时前
跟着 MDN 学 HTML day_16:(音频与视频处理——从画布滤镜到3D沉浸音频的进阶指南)
前端·javascript·ui·3d·html·音视频
XiYang-DING14 小时前
HTML 核心标签
前端·html
DFT计算杂谈17 小时前
wannier90 参数详解大全
java·前端·css·html·css3
之歆18 小时前
DAY13_CSS3进阶完全指南 —— 背景、边框、文本、渐变、滤镜与 Web 字体(下)
前端·css·css3
剑神一笑19 小时前
CSS 阴影生成器:从单层到多层叠加的艺术
前端·css·css3