微信小程序 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;
}