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

这是我最后得到的结果： 我正在努力使左侧边栏发生这种变化。

- Niaz M. Sameer

---

尝试使用 align-items: top;，align-items: bottom;。 - ElusiveCoder

@BuggyParadox 看起来好像没有生效。 - Niaz M. Sameer

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>

- Temani Afif

---

运行得非常完美！非常感谢！ - Niaz M. Sameer