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