lex布局非常好用，但在開發過程中可能會碰到的一些坑
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
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;/*防止被壓縮*/
}