如何强制弹性项目到页面底部？答案

【问题标题】：How to force a flex item to the bottom of the page?如何强制弹性项目到页面底部？
【发布时间】：2020-12-14 04:31:45
【问题描述】：

这就是我想要的布局

目前看起来像这样

我可以通过指定高度来增加第二个框的大小。

.row-2 {
  height: 500px;
}

肯定有比这更好的方法。

我也尝试过将最后一排框压到底部，但没有任何运气：

.row-3 {
  margin-top: auto;
}

我的flexbox如下：

<div className="container">
  <div className="row-1">1</div>
  <div className="row-2">2</div>
  <div className="row-3">
    <div>3</div>
    <div>4</div>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.row-1 {
  border: 2px solid green;
}

.row-2 {
  border: 2px solid blue;
}

.row-3 {
  border: 2px solid red;
  display: flex;
  flex: 1;
  margin-top: auto; /* not working */
}

.row-3 > div {
  flex-grow: 1;
  border: 2px solid purple;
}

【问题讨论】：

标签： html css reactjs flexbox

【解决方案1】：

flex-grow: 1; 可能是个问题。我想你是说第三排可以长得更多。您可能想删除它并在第二行设置flex-grow: 2;。

也许在第二行设置width: 100%;？

看起来你应该改用css-grid。我会推荐this tutorial 来学习它

【讨论】：

【解决方案2】：

我怀疑您的容器是<body> 的直接子级。如果是这样，body 将具有与它必须保持的高度一样多的高度，在这种情况下，它将具有与容器相同的高度。因此，您无法做您真正想做的事情。

我建议您将min-height: 100vh 添加到容器中，这将创建高度为视口 100% 的容器。

.container {
  min-height: 100vh
}

您的其余代码将完成这项工作。

【讨论】：