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
本文需要对flex布局有较深的理解。如果本文对你有点帮助，就给个赞呗！
