响应式flexbox填充所有浏览器高度[重复]

Question

我正在学习 flexbox，我的目标是创建一个包含 3 个项目的简单 flexbox，它可以响应不同的设备（智能手机、平板电脑、台式机……）。 这些项目应该一个在另一个之上，并一起填充所有浏览器的宽度和高度。所以基本上不应该有滚动。 （总结一个项目在最顶部，一个在页面底部，其余的占据中间的空间）。

桌面和智能手机上的宽度部分似乎可以工作。但是如何填充浏览器的高度，字体和框如何适应不同设备的不同高度，对我来说仍然是个谜。

我的临时解决方案是增加智能手机的利润……

你有什么想法？

这是我所做的：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  font-size: 3em;
}

.item {
  border: 5px solid red;
  margin-bottom: 40px;
}
@media screen and (max-width: 500px) {
  .element {
    margin-bottom: 70px;
  }
}

.one {
  flex-basis: 100%;
  display: flex;
}

.two {
  flex-basis: 80%;
  display: flex;
}

@media screen and (max-width: 64em) {
  body {
    font-size: 80%;
  }
}

@media screen and (max-width: 50em) {
  body {
    font-size: 70%;
  }
}

@media screen and (max-width: 30em) {
  body {
    font-size: 60%;
  }
}

.three {
  flex-basis: 100%;
}

<div class="container">
  <div class="item one">1</div>
  <div class="item two">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
  <div class="item three">3</div>
</div>

Answer 1

只需使用flex-grow: 1; 使flex-item 消耗容器内的所有剩余空间。

首先我们需要重置body margin：body { margin: 0; } 正文边距由 UA（浏览器的默认样式表）设置，因此在浏览器之间有所不同。这将导致无法为所有浏览器计算正确的边距并防止溢出。

接下来我们需要给flex-container 一个高度以填充整个视口高度：.container { height: 100vh; }。为了模拟身体边缘，我们现在也给它一个填充。为了防止溢出，我们添加了box-sizing: border-box;，否则填充会在 100vh 之上并垂直溢出。

然后我们应用 flexbox 并将 flex-direction 更改为：.container { flex-direction: column; }

最后但同样重要的是，我们添加了上面提到的flex-grow：.two { flex-grow: 1; }。这将使中间项目跨越整个剩余高度。为了将它们与顶部和底部框分开，我们可以添加一个边距，例如：.two { margin: 6px 0; }

至于您font-size 的问题：使用媒体查询无法为所有设备正确设置它。这是完全错误的做法。为此，您需要编写脚本。或者，您可以使用使其更容易的库。可以在这里找到一个很好的参考：Fitting Text to a Container

PS：您也可以简单地摆脱容器本身并直接在您的标记中使用主体作为容器。

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 6px;
  box-sizing: border-box;
}

.two {
  flex-grow: 1;
  margin:  6px 0;
}

.item {
  border: 2px solid red;
}


/* Edit on OP request */
.two {
  display: flex;
  align-items: center;
}

<div class="container">
  <div class="item one">1</div>
  <div class="item two">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
  <div class="item three">3</div>
</div>