垂直对齐两个弹性项目，彼此独立答案

【问题标题】：Align two flex items vertically independent of each other垂直对齐两个弹性项目，彼此独立
【发布时间】：2022-02-14 08:53:43
【问题描述】：

容器内有两个元素“Title”和“Signature”。它们的垂直位置将从给定的参数中获取并添加到 mustache 模板中，即可以是任何东西，例如：

标题和标题顶部/中心/底部；
标题在顶部，标题在中心；
标题居中，标题底部；
标题在顶部，标题在底部，等等。

如果我通过线条进行，那么标题要么粘在标题上（当它们在同一垂直方向上时），要么缩进沿标题内容的宽度可见。如果我通过这些列 - 什么都不会发生。任何人都可以建议将几个元素垂直对齐，但这样它们就不会粘在一起并且不会相互碰撞？

.item {
  display: flex;
  align-items: flex-start;
  border: 5px solid yellow;
  background-color: #bbb;
  height: 200px;
}

  <div class="item">
     <div class="title" style="align-self: flex-start;">Title lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum</div>
     <div class="caption" style="align-self: center;">Caption caption caption</div>
  </div>
  
    <div class="item">
     <div class="title" style="align-self: center;">Title lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum</div>
     <br>
     <div class="caption" style="align-self: center;">Caption caption caption</div>
  </div>
  
      <div class="item">
     <div class="title" style="align-self: center;">Title lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum</div>
     <br>
     <div class="caption" style="align-self: flex-end;">Caption caption caption</div>
  </div>

UPD：添加了最后应该是什么样子的图片

【问题讨论】：

标签： html css

【解决方案1】：

您可以将justify-self 和align-self 用于变体2 和3。其他一切都是基本的flexbox 和grid，您可以学习here 和here。

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  flex-wrap: wrap;
  margin: 1rem;
  gap: 1rem;
}
.variant{
  padding: 1rem;
  background-color: #6D6A89;
  height: 25rem;
  width: 250px;
  color: #fff;
}

.var1{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.var2{
  display: grid;
}
.var2>*{
  justify-self: center;
}

.var3{
  display: grid;
}

.var3>*{
  align-self: end;
  justify-self: center;
}

.var4{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

<body>
  <div class="variant var1">
    <h1>Title top</h1>
    <div class="caption">caption top</div>
  </div>
  <div class="variant var2">
    <h1>Title top</h1>
    <div class="caption">caption center</div>
  </div>
  <div class="variant var3">
    <h1>Title center</h1>
    <div class="caption">caption bottom</div>
  </div>
  <div class="variant var4">
    <h1>Title top</h1>
    <div class="caption">caption bottom</div>
  </div>
</body>

更多关于flexboxhere。

【讨论】：

恐怕这不是你所需要的。我已经为问题添加了应该是什么样子的图像。
编辑了 sn-p。