css 环形六边形布局

最终效果

使用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使得之间有间隙