Using CSS Flexbox `justify-content: space-between`, but left-aligned the last line

Question

I have a simple drawer grid in which I would quickly respond to Flexbox.

The number of boxes is generated by the user, so I need something to work dynamically. Here's the code snippet where I am:

<div class="wrap"> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> </div> 

CSS

 .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; } .thumb{ width:150px; height:150px; background-color:black; margin-bottom:20px; } 

Here's what it looks like with the code above:

Here is what I would like to look like:

How can this be achieved with flexbox? I want to avoid% margin and let flexbox do all the work here, if possible, as it works fine in a sensitive setting.

Answer 1

Well, you can do it, but at the expense of spoiling a little DOM. Insert placeholder elements (as many as the maximum numerical elements that will fit into the string) with a height of 0, and you have

 .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; } .thumb{ width:150px; height:150px; background-color:black; margin-bottom:20px; } .filler{ width:150px; height:0px; margin: 0px; } 

 <div class="wrap"> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> </div>