Uso del `justify-content: space-between` del CSS Flexbox ma allineamento a sinistra dell'ultima riga

Question

Ho una semplice griglia di caselle che vorrei occupare in modo reattivo dello spazio con Flexbox.

Il numero di caselle viene generato dall'utente, quindi ho bisogno di qualcosa per funzionare in modo dinamico. Here's a codepen snippet di dove sono a:

<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; 
} 

Ecco come si presenta con il codice di cui sopra:

Ecco quello che mi piace a forma di:

Come è possibile ottenere questo risultato con la tecnologia Flexbox? Voglio evitare% margini e lasciare che flexbox faccia tutto il lavoro qui, se possibile, perché funziona davvero bene in un ambiente reattivo.

Answer 1

Beh, puoi farlo, ma a scapito di rovinare un po 'il DOM. elementi Inserire di riempimento (tanti quanti gli elementi numero massimo che si inserisce in una fila) con un'altezza di 0, e lo avete

.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>