小程序为什么 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;
}
相关推荐
哟哟耶耶1 小时前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css
不是az1 小时前
CSS知识点记录
前端·javascript·css
疯笔码良4 小时前
【Vue】自适应布局
javascript·vue.js·css3
自然 醒5 小时前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
患得患失9496 小时前
【css技巧】用 CSS 实现:移入立即执行,移出延时返回
前端·css
我命由我123457 小时前
React - 组件优化、children props 与 render props、错误边界
前端·javascript·react.js·前端框架·html·ecmascript·js
李宏伟~7 小时前
大文件分片案例html + nodejs + 视频上传案例
javascript·html·音视频
ZC跨境爬虫8 小时前
海南大学交友平台登录页开发实战day3(解决python传输并读取登录信息的问题)
前端·数据库·python·html
慕斯fuafua8 小时前
CSS——样式
前端·css
E_ICEBLUE9 小时前
Python 办公自动化:快速将 HTML 转换为 PDF 格式
python·pdf·html