前言：
最近在公司中完成小程序的UI设计稿时，遇到了布局一个问题：UI设计稿想实现的布局是这样的：
笔者第一反应就是使用flex中的justify-content: space-between;属性，但是使用之后发现，justify-content: space-between;这个属性会以行为单位进行布局，就变成了这种布局：
经过笔者的研究，最后发现使用flex布局加百分比布局就可以自由排放每一行的盒子，整理代码如下：
HTML代码：
<body><div class="container"><div class="content"><imgsrc="你的图片地址"alt=""/><span>title1</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title2</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title3</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title4</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title5</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title6</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title7</span></div></div></body>CSS代码：
.container {width: 100%;padding: 20px 0px;height: 392rpx;/* 使用flex布局并允许换行 */display: flex;flex-wrap: wrap;background: #f2f8da;
}
.content {/* 给单个盒子设宽度，使用百分比，25%就是一行最多放4个盒子 */width: 25%;height: 50px;margin-bottom: 48px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 24rpx;font-weight: normal;line-height: 24rpx;color: #323640;
}
img {width: 30px;height: 30px;margin-bottom: 6px;
}