センターテキストは垂直で同じコンテナの高さはフレックスボックス

Question

フレックスボックスを使用して次のデザインを行う必要があります。

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

：原因私はすべてのコンテナにテキストを垂直方向に中央と同じ高さを維持することはできません

プログラミング要件にテーブル：私はテーブルまたはdispayを使用することはできません

私は、アイテムに使用しようとしている：

align-self:center; 

またはコンテナへ：

align-items:center; 

しかし、私はすべてのコンテナで同じ高さを失います。

アイデア？

Answer 1

あなたは、私はちょうどあなたが逃したものを最初のdivに更新demo
をチェック.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

にdisplay: flexalign-items: centerjustify-content: centerを追加することができます。 がoneに追加されました。

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