html - 具有相同高度的 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 子元素，垂直居中，应用背景，然后使该元素成为包含 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>