Flex列 - 将div垂直对齐到中间，将另一个div垂直对齐到底部

Question

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

预期结果：

Answer 1

.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解决方案，不使用绝对定位。

Answer 2

看看这个。

＆＃13;

＆＃13;

chi2_contingency(contingency, correction=False)
>>> (10.0, 0.001565402258002549, 1, array([[ 100.,  100.],
    [ 400.,  400.]]))

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;