微信小程序 Flex局部元素被擠壓問題

 關於Flex佈局不在此處贅述，須要瞭解的能夠查閱官方文檔：基本的佈局方法——Flex佈局

 

當使用Flex佈局，想實現以下圖1的效果時，代碼編寫以下：

圖1：

 

<!-- wxml文件 -->
<view class='test-view'>
  <view class='title'>標題:</view>
  <view class='content'>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</view>
</view>

/* wxss文件 */

.test-view {
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  background-color: white;
  width: 100%;
}

.title {
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.content {
  word-wrap: break-word;
  word-break: break-all;
}

 

 可是運行結果卻獲得圖2的效果，當後面的文字過多時，前面的view被擠壓了

 圖2：

 

解決辦法：

給標題的view的樣式中添加一句：flex-shrink: 0; 便可獲得圖一的效果，意思是flex的收縮爲0，不壓縮的意思

.title {
  margin-left: 20rpx;
  margin-right: 20rpx; flex-shrink: 0;
}