如何保持連續自動垂直包裝

Question

這裏的框架內的球是我的代碼：

.containerMaster { 
 
    border: 2px solid darkgray; 
 
    width: auto; 
 
    height: 310px; 
 
} 
 
.containerSlave { 
 
    width: auto; 
 
    height: auto; 
 
    display: inline-block; 
 
    padding: 2px 2px 2px 2px; 
 
    margin: 2px 2px 2px 2px; 
 
    border: 1px solid #000000; 
 
    background-color: aquamarine; 
 
} 
 
.ball { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 50%; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 1px #000; 
 
    font-size: 15px; 
 
    color: #ffffff; 
 
    margin: 3px 3px 3px 3px; 
 
    background: radial-gradient(circle at 20px 15px, #7FBBFC, #000); 
 
}

<div class="containerMaster"> 
 
    <div class="containerSlave"> 
 
    <div class="ball">01</div> 
 
    <div class="ball">02</div> 
 
    <div class="ball">03</div> 
 
    <div class="ball">04</div> 
 
    <div class="ball">05</div> 
 
    <div class="ball">06</div> 
 
    <div class="ball">07</div> 
 
    <div class="ball">08</div> 
 
    <div class="ball">09</div> 
 
    <div class="ball">10</div> 
 
    <div class="ball">11</div> 
 
    <div class="ball">12</div> 
 
    </div> 
 
</div>

但我希望可以到下面這樣：

Answer 1

DEMO：http://jsfiddle.net/q79ed1ue/

.containerSlave { 
    display: inline-flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 200px; /*item height x 10*/ 
} 
.containerSlave .ball { 
    height: 20px; 
    padding: 5px; 
    box-sizing: border-box; 
} 

一定要檢查出http://caniuse.com/#feat=flexbox