Flexbox align-items 拉伸问题答案

【问题标题】：Flexbox align-items stretch issueFlexbox align-items 拉伸问题
【发布时间】：2018-02-16 04:25:30
【问题描述】：

我有一个 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>

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案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>

【讨论】：

【解决方案2】：

第二个容器也需要 flex，因为你有 <p> 元素，请查看下面的 css，它会帮助你：

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

【讨论】：