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

Question

我正在学习 flexbox，我的目标是创建一个包含 3 个项目的简单 flexbox，以响应不同的设备（智能手机、平板电脑、台式机……）。这些项目应该一个在另一个之上，并且一起填满所有浏览器宽度，height.So 基本上不应该有滚动。（总而言之，一项在最顶部，一项在页面底部，其余的在左侧 space 之间）。

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

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

你有什么想法？

这是我所做的：

.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 消耗容器内所有剩余的 space。

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

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

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

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

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

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

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>

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

Responsive flexbox filling all the browser height

html

css

flexbox

responsive-design