Flexbox將具有相同高度的項目居中

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的唯一flex子.outer ，垂直居中，並應用背景，然后將該元素設置為flex父元素，用於保存您的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>