效果图
WXML
代码语言：javascript复制<view class="tui-row">
<view class="tui-col tui-col-2">
<view class="gallery-box">
<image class="gallery-img" src="https://rattenking.gitee.io/stone/images/wx/images/4.jpg"></image>
<text class="gallery-text">VUE实战</text>
</view>
</view>
<view class="tui-col tui-col-2">
<view class="gallery-box">
<image class="gallery-img" src="https://rattenking.gitee.io/stone/images/wx/images/1.jpg"></image>
<text class="gallery-text">ES6学习之路</text>
</view>
</view>
<view class="tui-col tui-col-2">
<view class="gallery-box">
<image class="gallery-img" src="https://rattenking.gitee.io/stone/images/wx/images/2.jpg"></image>
<text class="gallery-text">CSS实战</text>
</view>
</view>
<view class="tui-col tui-col-2">
<view class="gallery-box">
<image class="gallery-img" src="https://rattenking.gitee.io/stone/images/wx/images/3.jpg"></image>
<text class="gallery-text">VUE学习之路</text>
</view>
</view>
</view>WXSS
代码语言：javascript复制.tui-row{
padding: 5px;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.tui-col-2 {
width:50%;
flex: 0 0 auto;
}
.gallery-box{
padding: 5px;
}
.gallery-img{
width: 100%;
height: 200rpx;
}
.gallery-text{
display: block;
text-align: center;
font-size: 30rpx;
height: 80rpx;
line-height: 80rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}总结
1、使用flex进行布局要注意兼容性，所以采用：display: -webkit-flex;display: flex; 2、为了保证每排三个图标的两对对齐，采用：justify-content: space-between; 3、父元素必须设置flex-wrap: wrap;进行换行，否则会在一排展示； 4、每个子元素的宽度width: 50%;必须写出，否则会按照其占位大小分配； 5、每个子元素设置flex: 0 0 auto;否则某个子元素超出，会改变其他元素大小！
