Flexbox项目垂直居中，同时将另一个项目固定到左下角

Question

如何在保持标题元素meta垂直居中的同时将h1类修复到flex容器的左下角？

.container {
  height: 200px;
  background: red;
  display: flex;
  align-items: center;
}

<div class="container">
  <h1>Hello, world!</h1>
  <div class="meta">intro</div>
</div>

Answer 1

将其从流动中取出并相对于容器定位。

.container {
  height: 200px;
  background: red;
  display: flex;
  align-items: center;
  position: relative;
}
.meta {
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="container">
  <h1>Hello, world!</h1>
  <div class="meta">intro</div>
</div>

Answer 2

• 切换到flex-direction: column
• 申请justify-content: space-between
• 插入一个不可见的“spacer”项以平衡两端

.container {
  height: 200px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.invisible { visibility: hidden; }

<div class="container">
  <div class="invisible">intro</div>
  <h1>Hello, world!</h1>
  <div class="meta">intro</div>
</div>

请注意，flex对齐属性通过分配容器中的可用空间来工作。这意味着只有当两个相邻项目的高度相等时，justify-content: space-between才能精确居中中间项（h1）。有关详细信息，请参阅方框＃71 here。