小程序为什么 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;
}
相关推荐
小J听不清3 小时前
CSS 文本对齐方式实战:text-align 核心用法
前端·javascript·css·html·css3
酉鬼女又兒3 小时前
零基础入门前端弹性布局(Flexbox)实战:结合 Class 与 ID 选择器(可用于备赛蓝桥杯Web开发应用)
前端·css·蓝桥杯·html·html5
小J听不清3 小时前
CSS display 属性全解析:块级 / 行内 / 行内块 / 隐藏
前端·javascript·css·html·css3
Dxy12393102163 小时前
HTML中图表学习:从基础到实战指南
前端·学习·html
a1117764 小时前
MD 架构图生成器(html 开源)
前端·开源·html
smchaopiao4 小时前
理解HTML中的段落标签:功能与应用
前端·css·html
张3蜂17 小时前
HTML5语义化标签:现代网页的骨架与灵魂
前端·html·html5
御形封灵18 小时前
纯CSS实现方块下落等待动画
前端·css
转角羊儿19 小时前
CSS补充重要知识
前端·css
林九生20 小时前
【Vue3】解决 Tailwind CSS v4 + Vite 8 中 `@import “tailwindcss“` 不起作用的问题
前端·css