Css3 flexプロパティレイアウト上の要素の整列

Question

私はIE9のサポートを中止し、css3 Flexプロパティの使用を開始します。 今、私はブートストラップ3とflexプロパティの助けを借りていくつかのレイアウトを作成しました。

divsの2つのグループを持っています - col-sm-8 and col-sm-4.それらのすべてが画像を保持しています（幅と高さも比例していますが、すべて比例します）が、空のスペースを埋めるようにピンクボックスを移動することはできません。

CSSは簡単です（レススタイル）：HTML以下

.deals { 
     display: flex; 
     flex-wrap: wrap; 
     [class^="col-"] { 
     align-self: flex-start; 
     margin: 0; 
     padding: 0; 
     float: none; 
     } 
    } 

：

<div class="container-fluid"> 
     <div class="row deals"> 
      <div class="col-sm-8"> 
       <img src="images//1.jpg" alt=""> 
      </div> 
      <div class="col-sm-4"> 
       <img src="images//2.jpg" alt=""> 
      </div> 
      <div class="col-sm-4"> 
       <img src="images//3.jpg" alt=""> 
      </div> 
      <div class="col-sm-8"> 
       <img src="images//4.jpg" alt=""> 
      </div> 
      <div class="col-sm-4"> 
       <img src="images//5.jpg" alt=""> 
      </div> 
      <div class="col-sm-4"> 
       <img src="images//10.jpg" alt=""> 
      </div> 
      <div class="col-sm-8"> 
       <img src="images//6.jpg" alt=""> 
      </div> 
      <div class="col-sm-4"> 
       <img src="images//9.jpg" alt=""> 
      </div> 
      <div class="col-sm-4"> 
       <img src="images//8.jpg" alt=""> 
      </div> 
      <div class="col-sm-4"> 
       <img src="images//7.jpg" alt=""> 
      </div> 
     </div> 
    </div> 

質問ある - それらのピンクを移動させることが可能で、このです空スパを満たすために分割する元気？

ありがとうございました。この目的のために

Answer 1

あなたは石工スタイルのプラグインが必要..あなたはこのhttp://isotope.metafizzy.co/layout-modes/masonry.html