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;
}

image.png

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

image.png

image.png