共计 289 个字符，预计需要花费 1 分钟才能阅读完成。
最终效果
使用 flex 布局，将上图分为三列。
第一列两个图片、第二列三个图片、第三列两个。
在写出 html 页面之前，应该了解到该页面是由数据动态渲染的，所以应该把从后端接受来的数据变成对应的格式。例如:
把改造好的数据放入 html 中用 map 进行遍历即可。
页面：
首先要把图片变成六边形：clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
然后把 wrapper 设置为 flex 布局，flex-direction: column、align-items：center。
列之间设置一个 margin-right 使得之间有间隙
正文完
