ekran bölümleri her zaman 3 sütunda esnek üst üstlerindeki yüksekliklerine bakılmaksızın her zaman

Question

Her zaman esnek sütun üstündeki yüksekliklerine ve div sayısına bakılmaksızın 3 sütunda görüntülemek için divlara ihtiyacım var (bu 10 veya daha fazla olabilir - ancak her zaman 3 sütun - birbirinin altında nasıl yapabilirim? Kod Pan örneği beğendi.

DÜZENLEME:

<div class='main'> 
<div class='div'>1</div> 
<div class='div'>2</div> 
<div class='div'>3</div> 
<div class='div'>4</div> 
</div> 

.main {display:flex;flex-direction:row;background:silver;} 
.div {width:33%; height:10px;background:gold;margin:10px;} 

İşte benim ÖRNEKhttp://codepen.io/broudi/pen/MyVNyz olduğunu - ebeveyn esnek div 4 eşit birer bölümdür vardır. Ebeveyn div'unda ne kadar div varsa onu her zaman 3 sütun halinde konumlandırmam gerekir (ilk 3 yer alınırsa diğerinin altında).

YENİ DÜZENLEME: BAŞKA SORUN: http://codepen.io/broudi/pen/MyVNyz

sorun thechild dovs bir veya daha fazla sonra diğerlerini farklı yükseklik varsa gerekiyordu olarak daha sonra doesnt altına div gitmek şudur: BURADA MY KOD IS . biraz yer kaplar. Lütfen CODEPAN örneğime bakın. Yükseklikleri ne olursa olsun eşit 5px marjı ile birbiri ardına ne olursa olsun, içsel divları nasıl yapabilirim?

Answer 1

Eğer parçalanarak ana nedeni margin:10px; ait flex-wrap:wrap; andto div% 30 değil% 33 vermek zorunda ve şimdi hep bir satırı olacağı 3 div en

bile justify-content:space-around; koymak veya için between o

daha iyi görünüyor

.main {display:flex;flex-direction:row;background:silver; flex-wrap:wrap; justify-content:space-around;} 
 
.div {width:30%; height:10px;background:gold;margin:10px;}

<div class='main'> 
 
    <div class='div'>1</div> 
 
    <div class='div'>2</div> 
 
    <div class='div'>3</div> 
 
    <div class='div'>4</div> 
 
    <div class='div'>5</div> 
 
    <div class='div'>6</div> 
 
    <div class='div'>7</div> 
 
    <div class='div'>8</div> 
 
    <div class='div'>9</div> 
 
    <div class='div'>10</div> 
 
    <div class='div'>11</div> 
 
    <div class='div'>12</div> 
 
</div>