css ring hexagon layout

Posted May 29, 20201 min read

final effect

image.png

Using flex layout, divide the above picture into three columns.

Two pictures in the first column, three pictures in the second column, and two pictures in the third column.

Before writing an html page, you should understand that the page is dynamically rendered by data, so you should change the data received from the back end into the corresponding format. E.g:
image.png
Put the transformed data into html and traverse it with map.

page:

First of all, the picture must be turned into a hexagon:clip-path:polygon(25%0%, 75%0%, 100%50%, 75%100%, 25%100%, 0%50%);

Then set the wrapper to flex layout, flex-direction:column, align-items:center.

Set a margin-right between the columns so that there is a gap between