将子对齐CSS中的父级底部（Flexbox）

Question

我正在使用flexbox，我正在尝试将子分区与父分区的底部对齐。我找不到解决方案。这是我尝试过的一个例子。

.container {
    display: flex;
    flex-direction: column;
}

.top {
    height: 70%;
}

.bottom {
    height: 30%;
    justify-content: flex-end;
}

<div class='container'>
    <div class='top'>
        <p>Content to go on top</p>
    </div>
    <div class='bottom'>
        <p>Content to go on bottom</p>
    </div>
</div>

这就是我最终得到的：I am trying to make that happen to the left sidebar

Answer 1

你需要使.bottom成为一个灵活的容器，以便能够使用justify-content

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
  border:1px solid;
}

.top {
  height: 70%;
  border:1px solid;
}

.bottom {
  height: 30%;
  display: flex; /*added this*/
  flex-direction: column; /*added this*/
  justify-content: flex-end;
  border:1px solid;
}

<div class='container'>
  <div class='top'>
    <p>Content to go on top</p>
  </div>
  <div class='bottom'>
    <p>Content to go on bottom</p>
  </div>
</div>