html - Flexbox 对齐元素拉伸(stretch)问题

Question

我有一个 2 列容器。在左侧，有一个图像。在右侧，我有 2 <p>元素。我想定位一个 <p>元素在顶部，另一个在容器底部。

我尝试使用 flexblox，align-items拉伸(stretch)，但这不起作用。虽然flex-start和 flex-end确实有效。

这甚至可以用 flexbox 实现吗？

.container {
  display: flex;
  align-items: stretch;
}
img {
  display: block;
  width: 100%;
}
.element-box {
  height: 100%;
}

<div class="container">
  <div>
    <img src="https://placeimg.com/640/480/nature">
  </div>
  <div class="element-box">
    <p>Should be on Top</p>
    <p>Should be on Bottom</p>
  </div>
</div>

Answer 1

你可以让你的 element-box 成为一个 column flexbox 并且给 justify-content: space-between .同时从中删除 height: 100%。

请看下面的演示:

.container {
  display: flex;
  align-items: stretch;
}
img {
  display: block;
  width: 100%;
}
.element-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div>
    <img src="https://placeimg.com/640/480/nature">
  </div>
  <div class="element-box">
    <p>Should be on Top</p>
    <p>Should be on Bottom</p>
  </div>
</div>