CSS Flexbox'ın 'justify-content: space-between' işlevini kullanıp son satırı sola hizalama

Question

Flexbox'a duyarlı bir şekilde yerleştirmek istediğim basit bir kutu ızgaram var.

Kullanıcı tarafından oluşturulan kutu sayısı, bu nedenle dinamik olarak çalışmak için bir şeye ihtiyacım var. Nerede olduğumu ait Here's a codepen snippet:

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

İşte

isterdim ama ne:

İşte

.wrap{ 
    display:flex; 
    flex-wrap:wrap; 
    justify-content:space-between; 
} 

.thumb{ 
    width:150px; 
    height:150px; 
    background-color:black; 
    margin-bottom:20px; 
} 

yukarıdaki kod ile böyle görünüyor benzemek için:

Bu nasıl bir esnek kutu ile sağlanabilir? % Marjlardan kaçınmak istiyorum ve eğer mümkünse, esnek bir şekilde duyarlı bir ortamda çalıştığı için tüm işlerin esnek olmasını sağlarım.

Answer 1

Peki, bunu yapabilirsin, ama DOM'yi biraz yıkmak pahasına. takın dolgu 0 yüksekliğindeki (üst üste uyacak sayısı elemanları gibi birçok gibi) elemanları ve sahip o

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