flex布局非常好用,但在开发过程中可能会碰到的一些坑

1、内容超出容器


大致情况是:在一个设置了display:flex布局的大容器A中并排放置两个子容器,并且子容器设置flex:1,子容器中都有一个元素包含一段文本,这段文本设置了不换行并且显示省略号的样式,当文本过长的时候,子容器会被撑开,如下效果:



相关代码:
<view class='hot-content-box'> <view wx:for="{{hotCollageList}}" wx:key="hci"
class='hot-item-box' data-goodsid="{{item.goodsId}}"
data-activityid="{{item.activityId}}" bindtap="goodsDetail"> <image
src='{{item.goodsPic}}' mode='widthFix'></image> <view
class='goods-name'>{{item.goodsName}}</view> <view
class="goods-num">{{item.rule.numLimit}}人团</view> <view
class="goods-price-box"> <view class="goods-act-price
goods-line">¥{{item.actualPrice}}</view> <view class="goods-price-txt
goods-line">拼团价</view> <view class="goods-org-price
goods-line">¥{{item.goodsPrice}}</view> </view> </view> </view>
.hot-content-box { padding: 0 30rpx 30rpx; background: #fff; display: flex; }
.hot-item-box { padding: 20rpx; box-shadow: inset 0 -1px 1px 1px rgba(228, 221,
221, 0.50); border-radius: 8px; flex: 1; } .hot-item-box:first-child{
margin-right: 30rpx; } .goods-name { font-size: 18px; color: #000;
letter-spacing: 0.72px; line-height: 22px; width: 100%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
这里的text-overflow:
ellipsis;不生效,省略号没有出现,并且过长的文字将子容器撑开,问题可能出在于子容器没有设置宽度,省略符可能需要对父元素设置宽度,设置为100%无效,当设置为0的时候,省略号出现了
.hot-item-box { padding: 20rpx; box-shadow: inset 0 -1px 1px 1px rgba(228,
221, 221, 0.50); border-radius: 8px; flex: 1; width: 0; }


因为不设置宽度,子容器会被文本节点无限撑开,通过测试发现,设置子容器overflow:hidden也可以满足效果。

这里参考:https://blog.csdn.net/zgh0711/article/details/78270555
<https://blog.csdn.net/zgh0711/article/details/78270555>

2、设置了固定宽高的图片被压缩


通常实现如下的效果,是把外层容器设置为display:flex,容器中图片设置固定宽高度,右边元素设置为flex:1,但当右边元素宽度超出剩余空间的时候,图片会被挤压,变成椭圆形。



这是因为在flex容器中,当空间不够的时候,flex-shrink不为0的元素会被压缩,所以解决的方法就是给图片设置:flex-shrink:0。
.existCollages .row image { width: 40px; height: 40px; border-radius: 50%;
margin-right: 8px; flex-shrink: 0;/*防止被压缩*/ }
 

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信