Question

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

我尝试使用flexblox，align-items来伸展，但这不起作用。虽然flex-start和flex-end确实有用。

这对Flexbox来说是否可行？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以将element-box 列 flexbox设为justify-content: space-between。同时从中移除height: 100%。

见下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

Flexbox对齐项目延伸问题

2 个答案: