How to center a div and have the content left aligned

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

Flexbox is the answer, but you need to wrap the boxes in another div to create the spaces, so the parent divs sit next to each other.

Here’s a video to explain…
CloudApp

Hope this helps

Thanks Markos for your help and the video! This is a step in the right direction, unfortunately it doesn’t solve all of my problems. My boxes should have a fixed width, not one with percentage and there is a case, where only 1 line with maybe 2 or 3 boxes are displayed. When I use your solution they are still left aligned:

This is my public share link: https://preview.webflow.com/preview/box-wrapping?preview=4d60943310cfa6ddca20938fdecc8e47

So it’s a similar way, but just calculate what width you need. Using exact pixels will make your design less responsive.

Just bear in mind that using EM sizing for padding is usually a typography sizing, so if you alter the font size in the parent container that padding will change and may alter your design.

Hope this helps…
CloudApp

Hi Markos, thanks again! And I keep the hint with the EM sizing in mind. In your screencast you do resize the content so that the boxes wrap into a new line and there you see, that they are not centered (this is capture from your screencast):

That is exactly my problem I can’t get solved. Calculating in advance doesn’t work because I can’t predict the screen size and how many boxes will be displayed in one line. Unfortunately making the boxes expand also is a problem, because if they wrap into a new line the line with less divs stretches the boxes, but I need them all to have the same width:

That will be an issue if you’re using exact pixels. It won’t be responsive the way you want it to be. The benefit of using % or VW is that it will look right on all devices and screen sizes, i.e fully responsive.

What’s the reason you have to use exact pixel size if you don’t mind me asking?

It’s for prototyping the behavior of an app and the boxes represent an item which shouldn’t be scaled.

Let’s imagine I would use %. For 4 boxes I would use 25%. But if the screen becomes too narrow so that only 3 boxes can be show in one row, than 25% wouldn’t work anymore, right?

I do suspect that only some javascript magic can solve my problem.

If you use 25%, the screen will never be too narrow to place them side by side. It will divide whatever is there by 4. If it’s 1200px wide it will be 300 each… if it’s 12 pixels wide it will still show 4, only they will be 3px each. It’s all relative.

For the desktop breakpoint you might set 25% for the items to show 4, on the tablet you might show 33.3% for each box so they display 3 per line, for mobile 50%. and so on.

That way, you’re showing them at an exact % of whatever sized screen they’re displayed on.

Yes, that is a possibility. But the breakpoints available in Webflow won’t fit my needs. Let’s say I have 12 boxes in one row which means 8.33% for each box. They sit perfectly next to each other and are wide enough on large screens. But before I reach the next breakpoint the boxes would be way too small.