flexの親の高さにかかわらずdivを常に3列に表示

Question

flexの親の高さとdivの数に関係なくdivを常に3つの列に表示する必要があります（10以上でもかまいませんが、常に3列 - お互いの下に）どうしたらいいですか？コードパンの例が高く評価されました。

EDIT：

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

ここでは、私の例http://codepen.io/broudi/pen/MyVNyzある - 4つの等しいdiv要素は親フレックスのdivです。親のdivにあるdivが3列に配置されていても、最初の3つの場所を取る場合は、その下に1つずつ配置する必要があります。

NEW EDIT：別の問題：http://codepen.io/broudi/pen/MyVNyz

問題がthechildのdovsの1つ以上が、その後、他の異なる高さを持っている場合、それはになって、その後のdoesnt以下のdivが行くということです：HEREはMY CODE IS 。いくらかのスペースが必要です。私のCODEPANの例を見てください。高さにかかわらず5pxのマージンを持つものが何であっても、内側のdivをどのように作成できますか？

Answer 1

あなたが原因margin:10px;の親flex-wrap:wrap; andto divの30％ない33％を与える必要があり、今あなたはいつもそれが

良く見えることのためにも justify-content:space-around;または betweenに入れ3のdivの

の行を持っています

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