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