Flexbox 对齐项目拉伸问题

Question

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

我尝试使用 flexblox，align-items 进行拉伸，但这不起作用。尽管 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 设为专栏 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>

Answer 2

第二个容器也需要 flex，其中有 <p> 个元素，请查看下面的 css 它会对您有所帮助：

.element-box {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}

Flexbox 对齐项目拉伸问题

Flexbox align-items stretch issue

html

css

vertical-alignment

flexbox