小程序为什么 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;
}
相关推荐
咩咩不吃草2 小时前
【HTML】核心标签与【Python爬虫库】实战指南
css·爬虫·python·html
霍理迪3 小时前
CSS移动端开发及less使用方法
前端·css
2601_949857433 小时前
Flutter for OpenHarmony Web开发助手App实战:HTML参考
前端·flutter·html
2301_8127314116 小时前
CSS3笔记
前端·笔记·css3
ziblog16 小时前
CSS3白云飘动动画特效
前端·css·css3
越努力越幸运50816 小时前
CSS3学习之网格布局grid
前端·学习·css3
半斤鸡胗16 小时前
css3基础
前端·css
ziblog16 小时前
CSS3创意精美页面过渡动画效果
前端·css·css3
akangznl16 小时前
第四章 初识css3
前端·css·css3·html5