小程序为什么 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;
}
相关推荐
anOnion9 小时前
构建无障碍组件之Slider Pattern
前端·html·交互设计
就叫_这个吧12 小时前
HTML常用标签及举例使用
前端·html
要写代码16 小时前
2026-Css忘掉一切、归零再启
css
就叫_这个吧17 小时前
JavaScript中常用事件示例展示附源码
开发语言·javascript·html
罗超驿18 小时前
9.零基础学CSS:元素属性设置(字体、颜色、对齐等)全解析
前端·css
scan72418 小时前
大模型只是知道要调用工具,本身不
前端·javascript·html
云水一下19 小时前
CSS3从零基础到精通(一):前世今生与基础入门
前端·css3
ZC跨境爬虫20 小时前
跟着 MDN 学CSS day_34:(CSS 布局全面解析)
前端·css·ui·html·tensorflow
ZC跨境爬虫21 小时前
跟着 MDN 学CSS day_32:(Web字体深度解析与实践指南)
前端·javascript·css·ui·html
ZC跨境爬虫21 小时前
跟着 MDN 学CSS day_35:浮动布局完全指南
前端·css·ui·html·tensorflow