Flex 列 - 将 div 垂直对齐到中间，另一个 div 垂直对齐到底部 [重复]答案

【问题标题】：Flex column - align div vertically to middle and another div vertically to bottom [duplicate]Flex 列 - 将 div 垂直对齐到中间，另一个 div 垂直对齐到底部 [重复]
【发布时间】：2018-01-11 05:01:39
【问题描述】：

如何在 flex 列中将一个 div 垂直对齐到中间，另一个 div 垂直到底部？

预期结果：

【问题讨论】：

你的 div 有特定的高度吗？
@avrilalejandro flex 列有一个特定的高度

标签： html css flexbox centering

【解决方案1】：

看看这个。

.parent{
  display: flex;
    height: 150px;
    width: 50px;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
}

.two{
    align-self: flex-end;
    position: absolute;
}

<div class="parent">
   <div>test</div>
   <div class="two">test</div>
</div>

【讨论】：

它不起作用。
你能解释更多吗？
应该等于i.stack.imgur.com/y5XIb.png
你的意思是宽度更大？

【解决方案2】：

您必须使用具有相同高度值的line-height 属性

.parent{
  display: table;
  position: relative;
  border: 1px solid;

  height: 150px;
  line-height: 150px;
}
.parent div{
  position: absolute;
  bottom: 0;
  line-height: 20px;
}

<div class="parent">
  test
  <div>test</div>
</div>

【讨论】：

我要使用flexbox，你不能在多行文本中使用line-height...
@Rob 请在您的问题中添加代码

【解决方案3】：

.container {
  border: 1px solid black;
  height: 200px;
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.first-item {
  margin-top: auto;
  margin-bottom: auto;
}

<div class="container">
  <div class="first-item">First</div>
  <div class="second-item">Second</div>
</div>

应该这样做。然后第二个项目应该被推到底部，而第一个项目留在中间。不使用绝对定位的纯 flexbox 解决方案。

【讨论】：

太棒了。整天都在找这个。工作 100%