flex布局防止被挤压 flex-shrink: 0

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

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

 

相关代码：

{{item.goodsName}}
{{item.rule.numLimit}}人团

¥{{item.actualPrice}}
拼团价
¥{{item.goodsPrice}}



.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

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;/*防止被压缩*/
}

转载于:https://www.cnblogs.com/zzsdream/p/10437920.html