弹性列 - div 垂直对齐中间，另一个 div 垂直对齐底部

Question

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

预期结果：

Answer 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>

Answer 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>

Answer 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 解决方案。

弹性列 - div 垂直对齐中间，另一个 div 垂直对齐底部

Flex column - align div vertically to middle and another div vertically to bottom

html

css

centering

flexbox