小程序的图文列表，图片大小固定，文本内容很多需要换行时图片被挤变

今天做了一个图文列表，如图 image.png

咋一看，没什么问题。代码如下：

<!-- wxml -->
<view class='allProject-body'>
    <view class='title'>所有项目</view>
    <block wx:for="{{allProjects}}" wx:key="*this">
      <view class='projectItem'>
        <image src='{{item.url}}' mode='center'></image>
        <view class='content'>
          <view class='name'>{{item.name}}</view>
          <view class='message'>{{item.message}}</view>
        </view>
      </view>
    </block>
  </view>

.allProject-body{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.allProject-body .title{
  font-size: 15px;
  color: #fff;
  justify-content: center;
  text-align: center;
  margin-top: 10px;
  background-color: rebeccapurple;
}
.allProject-body .projectItem{
  width: 100%;
  display: flex;
}
.allProject-body .projectItem  image{
  width: 110px;
  height: 110px;
  margin: 10px;
}

.allProject-body .projectItem .content{
  margin-top: 10px;
  margin-right: 10px;
}
.allProject-body .projectItem .content .name{
  font-size: 15px;
}
.allProject-body .projectItem .content .message{
  font-size: 13px;
  color: gray;
  margin-top: 5px;
}

设计理念是用flex布局，图片和文本在主轴上的对其方式是row，图片固定宽高，文本内容填充。这种设计表面上没有什么问题，但是当文本的内容足够多，需要换行时，bug就出现了。如下图： image.png

由于文本内容过多，图片被挤变形了。
解决办法是给文本样式设置width(宽度可随意设置)，利用flex的flex-grow和
flex-shrink属性，来解决文本怎么分配剩余空间的问题。代码改动如下：

image.png image.png 运行后，完美解决，不管内容怎么换行，还是在iPhone5、iPhone6上运行都没有问题。
本文需要对flex布局有较深的理解。如果本文对你有点帮助，就给个赞呗！