My question sounds simple, but I’m struggling to get the desired result. I have a variable number of divs with a fixed width and a fixed distance to each other and that is how they should behave:
- When there is enough space within the parent div they should be centered (easy with flexbox)
- When there is not enough space left they should wrap into a new line (easy with flexbox)
- The div(s) in the new line should be left aligned but the lines overall should be centered (not so easy anymore).
If I use flexbox justify:start all the divs are left aligned. If I use flexbox justify:center the divs in the new line are centered below the first line. Is there a solution to this problem? I have also attached an illustration to make the problem clearer.
Here is my site Read-Only: https://preview.webflow.com/preview/box-wrapping?preview=4d60943310cfa6ddca20938fdecc8e47