小程序为什么 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;
}
相关推荐
a1117765 小时前
小鸡下蛋 小游戏 html
前端·开源·html
DevOpenClub5 小时前
用网页快照、静态 HTML 和 PDF 转换接口构建网页归档 Agent
前端·人工智能·pdf·html
醉城夜风~17 小时前
CSS元素显示模式(display)
前端·css
开普勒chr1 天前
css样式diaplay:"contents"的妙用
css
软件技术NINI1 天前
盗墓笔记html+css+js 2页
css·笔记·html
ShuiShenHuoLe1 天前
Go html/template 使用入门
开发语言·golang·html
午安~婉1 天前
挑战二:博客预览卡片
前端·javascript·html
用户059540174462 天前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
林焱_RPAAI2 天前
影刀RPA操作数据库进阶:事务处理与批量写入优化
css
牧艺2 天前
cos-design PhotoAlbum:用 CSS 3D 做一个「能翻页」的实体相册
前端·css·交互设计