Hi,
I have 6 boxes in a flex container, each of boxes have a max-width at 25% so they wrap to another row and when I’m using space around or space between properties the gap between elements is wrong. Funny thing when I have 2 elements so there is only one row the spacing between elements is different but still wrong.
This is how it should look.
Js fiddle links
https://jsfiddle.net/6a30m45j/3/
https://jsfiddle.net/6a30m45j/2/
Hello 
Have you tried using a grid for this? Or is the intention to get it right using flex?
No, I wanted to use flexbox first, and I noticed this bug so I posted here. Could you recreate this to check if it’s real bug or I am doing something wrong. I’m 100% sure that it should look like in jsfiddle but I’m a noob when it comes to using webflow.
Hello
I had another look. Seems that the ‘space-around’ one (screenshot as reference) can work if the div blocks have margin-right and margin-left set to auto. The other one I am struggling with - not sure why it wouldn’t translate. Will see if I can find a solution
Okay so I fiddled a bit more and seem to have figured it out - well, more like a workaround as it’s not ‘exact’.
I set the div block order: last.
I then set the spacearound div block to justify: space between.
I then set the Container block to justify: space around.
This is the best I could do Hope it helps!
Flexbox is best to solve this. My understanding is that flexbox threats each row separately when it places elements. https://jsfiddle.net/fdq5c8wr/
In grid align-items has no space-around/between property and justify-content it takes all elements and treat it as a whole. I couldn’t achieve same effect - https://jsfiddle.net/dt0r1f4u/. I could place elements manually on the grid but it would have to know how many elements there will be.
Anyway thanks for your hack, it will have to suffice for now.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
