flex佈局防止被擠壓 flex-shrink: 0

lex佈局很是好用，但在開發過程當中可能會碰到的一些坑

一、內容超出容器
大體狀況是：在一個設置了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

二、設置了固定寬高的圖片被壓縮
一般實現以下的效果，是把外層容器設置爲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;/*防止被壓縮*/
}