小程序为什么 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;
}
相关推荐
anOnion2 天前
构建无障碍组件之Menu Button pattern
前端·html·交互设计
米丘2 天前
微前端之 Web Components 完全指南
微服务·html
用户059540174463 天前
AI Agent记忆测试踩坑实录:Mock骗了我一周,Mem0+pytest一招破局
前端·css
Darling噜啦啦4 天前
CSS 3D 变换与 Flex 布局实战:从零打造旋转立方体
前端·css
用户059540174464 天前
把待办应用从Electron换成Tauri,内存占用狂降90%,打包体积仅5MB
前端·css
小月土星5 天前
CSS 3D 从入门到炫技:手把手教你写一个旋转立方体
前端·css
xingpanvip5 天前
星盘接口开发文档:本命盘接口指南
android·开发语言·css·php·lua
Metaphor6925 天前
使用 Python 将 PDF 转换为 HTML
python·pdf·html
HjhIron5 天前
CSS 3D 世界:从盒子模型到三维空间动画
javascript·css
参宿75 天前
CSS 悬挂空白与选区溢出
前端·css