如何将球保持在顺序自动垂直包裹的框架内

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> 

但我希望可以做到这一点：

01 11

02 12

03 13

04

05

06

07

08

09

10

Answer 1

演示： 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