文章/答案/技术大牛

发布

社区首页 >问答首页 >如何强制将flex项目放在页面底部？

问如何强制将flex项目放在页面底部？
EN

Stack Overflow用户

提问于 2020-12-14 12:31:45

回答 2查看 37关注 0票数 1

这就是我想要的布局

目前它看起来是这样的

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

.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

回答 2

Stack Overflow用户

发布于 2020-12-14 13:27:28

拥有flex-grow: 1;可能是个问题。我认为您明确表示第三行可以增长更多。您可能希望将其删除，并在第二行上设置flex-grow: 2;。

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

但是看起来你应该使用css-grid。我推荐this tutorial来学习它。

票数 0

Stack Overflow用户

发布于 2020-12-15 22:18:26

我怀疑您的容器是<body>的直接子容器。如果是这样的话，body的高度将与它必须容纳的高度相同，在这种情况下，它的高度将与容器的高度相同。正因为如此，你无法做你真正想做的事情。

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

.container {
  min-height: 100vh
}

剩下的代码就可以完成这项工作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65283629

复制

相似问题

问如何强制将flex项目放在页面底部？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制将flex项目放在页面底部？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制将flex项目放在页面底部？
EN