同じ高さのFlexbox centeresアイテム

Question

私はflexboxグリッドを止め、動作していない同じ高さに各アイテムを作ろうとしました。基本的に青い容器はすべて同じ高さでなければなりません。

HTML：

<div class="outer"> 

    <div class="item"> 
     <h1>Contact</h1> 
    </div> 

    <div class="item"> 
     <h3>Mail:</h3> 
     <a>john@doe.com</a> 
     <br> 
     <a>PGP</a> 
    </div> 

    <div class="item"> 
     <h3>Telegram:</h3> 
     <a>www.t.me/doe</a> 
    </div> 

</div> 

CSS：

.outer { 
display: flex; 
justify-content: space-around; 
align-items: center; 
flex-wrap: wrap; 
height: 100vh; 
width: 100vw; 
} 
.item { 
background-color: aqua; 
flex: 1; 
} 

写真：

Answer 1

私は.outerの唯一のフレックス子である別の要素を追加し、バックグラウンドで、垂直方向の中央その要素を3つのセクションを保持するフレックス・ペアレントにして、それを整列させます。

.outer, .inner { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.outer { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
.inner { 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    flex: 1 0 0; 
 
    background-color: aqua; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="item"> 
 
     <h1>Contact</h1> 
 
    </div> 
 
    <div class="item"> 
 
     <h3>Mail:</h3> 
 
     <a>john@doe.com</a> 
 
     <br> 
 
     <a>PGP</a> 
 
    </div> 
 
    <div class="item"> 
 
     <h3>Telegram:</h3> 
 
     <a>www.t.me/doe</a> 
 
    </div> 
 
    </div> 
 
</div>