Tek alt öğeleri, esnek kutu ile dikey olarak hizalama

Question

Dikey olarak ortalanmış değişken sayıda alt öğe içeren, aralıklı olarak aralıklı bir sütun sayısına sahip olmaya çalışıyorum. Neredeyse istediğim yerdeyim, ama çocuk elemanlarının miktarını bire indirirseniz, dikey hizalama başarısız olur (bir ve beş satır).

Neyi yanlış yapıyorum?

Kodu (http://codepen.io/anon/pen/bpvMda):

.myView { 
 
    margin: auto; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
    height: 500px; 
 
    width: 500px; 
 
} 
 
.wpType { 
 
    flex: 0 1 auto; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-items: space-around; 
 
    align-content: center; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    border: 1px solid silver; 
 
} 
 
.wpType:nth-child(even){ 
 
    background: blue; 
 
} 
 
.wpType:nth-child(odd){ 
 
    background: red; 
 
} 
 
.wp { 
 
    flex: 0 1 auto; 
 

 
    padding: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    background: white; 
 
    line-height: 100px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
}

<div class="myView"> 
 
    <div class="wpType"> 
 
    <div class="wp"></div> 
 
    </div> 
 
    <div class="wpType"> 
 
    <div class="wp"></div> 
 
    <div class="wp"></div> 
 
    <div class="wp"></div> 
 
    </div> 
 
    <div class="wpType"> 
 
    <div class="wp"></div> 
 
    <div class="wp"></div> 
 
    <div class="wp"></div> 
 
    </div> 
 
    <div class="wpType"><div class="wp"></div> 
 
    <div class="wp"></div></div> 
 
    <div class="wpType"><div class="wp"></div></div> 
 
</div>

Answer 1

merkezli elemanların tümü senin üst div üzerinde bu özellikleri kullanın. Sütunları isteseydi aşağıda cevapta belirtildiği üzere

display: -webkit-flex; 
display: flex; 
-webkit-flex-direction: column; 
flex-direction: column; 
-webkit-align-items: center; 
align-items: center; 
-webkit-justify-content: center; 
justify-content: center; 

Codepen