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的唯一弹性子元素，垂直居中，背景应用于它，然后使该元素成为包含3个部分并对齐它们的flex父元素。

.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>