小程序为什么 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;
}
相关推荐
Never_Satisfied10 小时前
在HTML & CSS中,nth-child、nth-of-type详解
前端·css·html
光影少年11 小时前
前端css如何实现水平垂直居中?
前端·javascript·css
你怎么知道我是队长11 小时前
前端学习---HTML---块元素和行内元素
前端·学习·html
holeer12 小时前
【V1.0】Typora 中的 HTML 支持|软件文档自翻译
前端·编辑器·html·typora·web·markdown·文档
肖。354878709413 小时前
[html-1]双板块最简界面,适合用于有两个网页分发,跳转。
html
你怎么知道我是队长13 小时前
前端学习---HTML---表单
前端·学习·html
globaldomain14 小时前
立海世纪:WordPress 6.9的新功能、新模块、新API
前端·javascript·html·新媒体运营·网站建设·wordpress·域名注册
你怎么知道我是队长14 小时前
前端学习---HTML---标签属性
前端·学习·html
Purgatory00115 小时前
CSS 访问服务器
服务器·前端·css
长城202415 小时前
HTML5中表单的pattern属性解析
前端·正则表达式·html·html5·pattern·pattern属性·pattern正则表达式