响应式 Flexbox 填充所有浏览器高度

Question

我正在学习 Flexbox，我的目标是创建一个包含 3 个项目的简单 Flexbox，这些项目将响应不同的设备（智能手机、平板电脑、台式机\xe2\x80\xa6）。\n这些项目应该一个在另一个之上，并且\n（总结一下，一项位于最顶部，一项位于页面底部，其余项占据中间的左侧空间）。

\n

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

\n

我的临时解决方案是增加smartphone\xe2\x80\xa6的margin

\n

你怎么看？

\n

这是我所做的：

\n

\r\n

\r\n

.container {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  height: 100%;\n  font-size: 3em;\n}\n\n.item {\n  border: 5px solid red;\n  margin-bottom: 40px;\n}\n@media screen and (max-width: 500px) {\n  .element {\n    margin-bottom: 70px;\n  }\n}\n\n.one {\n  flex-basis: 100%;\n  display: flex;\n}\n\n.two {\n  flex-basis: 80%;\n  display: flex;\n}\n\n@media screen and (max-width: 64em) {\n  body {\n    font-size: 80%;\n  }\n}\n\n@media screen and (max-width: 50em) {\n  body {\n    font-size: 70%;\n  }\n}\n\n@media screen and (max-width: 30em) {\n  body {\n    font-size: 60%;\n  }\n}\n\n.three {\n  flex-basis: 100%;\n}

\r\n

<div class="container">\n  <div class="item one">1</div>\n  <div class="item two">\n    "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\n    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."\n  </div>\n  <div class="item three">3</div>\n</div>

\r\n

\r\n

\r\n

\n

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>