Hi there, I’m trying to use the flexbox feature to recreate the people grid for my website. If you check out “People” page, that’s what I’m trying to achieve, and if you check out “People copy 2”, that’s as far as I got for the grid. Is there anyway to achieve the same result using flexbox?
Also the WISIWIG doesn’t show the hover effect properly when the div block is contain in the profile AND in a flexbox format.
From what I see, you are trying to create Masonry grid by using flexbox.
For doing this you need:
give some height to flexbox container
check option WRAP CHILDREN
set flex layout direction to COLUMNS
give the width to flexbox item, depends on how many columns you want to have (45-50% = 2 columns, 30-33% = 3 columns, 22-25% = 4 columns, etc)
Flex items order will be vertical, same as you have on “People page”
This method is not perfect because you have to keep flex container with some fixed height and if user will want to change browser window size, flex item can “jump” out of this container and create next column outside.