弹性项目垂直居中，同时固定另一个项目在左下角

Question

如何将meta类固定在flex容器的左下角，同时保持标题元素h1垂直居中?

.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
• 插入一个不可见的"间隔"项来平衡两端

.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)，只有当两个相邻的项目是相同的高度。详细信息请参阅此处。