问答

为什么flex-shrink不起作用?

作者:admin 2021-05-09 我要评论

微信小程序开发的 wxml: scroll-view scroll-y="true" style="width:100%" radio-group bindchange="radioChange" style="width:100%" view wx:for="{{welfareLi...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

微信小程序开发的

wxml:

<scroll-view scroll-y="true" style="width:100%">
    <radio-group bindchange="radioChange" style="width:100%">
      <view wx:for="{{welfareList}}" class="list-box" wx:key="id">
        <radio value="{{item.id}}"></radio>
        <view class="right-box">
          <view class="title-box">
            <text class="item-title">公益名称: {{item.name}}</text>
            <view class="center-align" bindtap="goToDetail" data-id="{{item.id}}">
              <text class="more-text">了解更多</text>
              <image class="right-btn" src="/static/images/go.png"></image>
            </view>
          </view>
          <image class="box-image" src="{{item.imgSrc}}"></image>
        </view>
      </view>  
    </radio-group>
  </scroll-view>

wxss:

.list-box {
  margin:15px 15px 0 15px;
  padding:10px;
  background-color: white;
  border-radius:8px;
  display: flex;
  align-items: center;
  width:calc(100% - 30px);
  box-sizing: border-box;
}

.right-box{
  flex-grow: 1;
  flex-shrink: 999;
}

希望达到的效果是不论右边部分(.right-box)原始宽度是多少,都按照radio余下部分宽度来计算

多则缩 少则扩

但是效果是这样的:
image

flex-grow是起作用了
但是flex-shrink不起作用

求大神指导。

###

给图片设置宽度就可以了吧

.box-image {
  width: 100%;
}
###

你这个很明显是没有给图片设置宽高。根据你给一楼的回复可以看出 你给的是 图片的容器的宽高,而不是图片的宽高。小程序里 图片的默认宽高是320 * 240

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • grom设置json默认值

    grom设置json默认值

  • Vue路由报错,看着没问题

    Vue路由报错,看着没问题

  • 思否邮箱登录为什么区分大小写了呢?

    思否邮箱登录为什么区分大小写了呢?

  • 有没有能够直接上传markdown文件作为博

    有没有能够直接上传markdown文件作为博

腾讯云代理商
海外云服务器