Merkez metni dikey olarak ve aynı kapların yükseklikleri flexbox ile

Question

Aşağıdaki tasarımı flexbox kullanarak yapmalıyım.

https://jsfiddle.net/kurtko/2fq6kn6m/

: nedeniyle tüm kaplarda dikey metni ortalamak ve aynı yüksekliğe sürdüremez

programlama gereksinimlerine tablo: Ben tablo veya Dispay kullanamazsınız

align-self:center; 

012:

Ben öğelere kullanmaya çalışıyorum

Veya kaba:

align-items:center; 

Ama bütün kaplarda aynı yüksekliğe kaybederler.

Herhangi bir fikrin var mı?

Answer 1

Sen demo
Sadece ne cevapsız ilk div güncellenecek edin .one.small.medium

.item { 
 
    display: flex; 
 
    text-align: center; 
 
} 
 
.one, 
 
.small, 
 
.medium { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.one { 
 
    align-items: flex-start; 
 
} 
 
.one { 
 
    width: 39%; 
 
    margin-right: 1%; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.two { 
 
    width: 29%; 
 
    margin-right: 1%; 
 
} 
 
.three { 
 
    width: 40%; 
 
} 
 
.medium { 
 
    background-color: grey; 
 
    color: white; 
 
    margin-bottom: 3px; 
 
    height: 200px; 
 
} 
 
.small { 
 
    background-color: #c0b55a; 
 
    color: white; 
 
    margin-bottom: 3px; 
 
    height: 100px; 
 
}

<div class="item"> 
 

 
    <div class="one"> 
 
    Top 
 
    </div> 
 

 
    <div class="two"> 
 
    <div class="medium">Center</div> 
 
    <div class="medium">Center</div> 
 
    </div> 
 

 
    <div class="three"> 
 
    <div class="small">Center</div> 
 
    <div class="small">Center</div> 
 
    <div class="small">Center</div> 
 
    <div class="small">Center</div> 
 
    </div> 
 

 
</div>

Answer 2

üzerinde display: flexalign-items: centerjustify-content: center ekleyebilir. one eklendi:

.one{ 
align-items: center; 
    justify-content: center; 
    display: flex; 
}