卡在负责任的弹性盒子上

Question

当宽度太小而无法同时显示时，包装 flexbox 出现问题。这是全屏：Shows a fullscreen-site

如果缩小浏览器宽度会发生以下情况：reduced width

现在，如果我再次减小宽度，它看起来像这样：1 mm more reduced than before

当然，它应该在它们之间。

body {
  background-color: aquamarine;
}

#Wrapper,
body,
html,
main,
nav,
header,
div,
class,
footer {
  margin: 0;
  padding: 0;
}

main {}

header h1 {
  position: relative;
  width: 50%;
  top: 8vh;
  left: 25%;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: 'Bree Serif', serif;
  color: deeppink;
}

.Container {
  position: absolute;
  top: 25%;
  left: 30vw;
  display: flex;
  height: 50%;
  width: 40%;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item {
  width: 16em;
  background-color: lightslategrey;
}

<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">

<div id="Wrapper">
  <header>
    <nav>
    </nav>
    <h1>This is a heading and it's extra long to test stuff.</h1>
  </header>
  <main>
    <div class="Container">
      <div class="item">
      </div>
      <div class="item">
      </div>
    </div>
  </main>
</div>

Answer 1

我在您的 CSS 上发现了一些问题，这些问题迫使您的盒子 item 出现这种行为。 主要问题是您将容器的宽度限制为 40%，然后当您调整窗口大小时，内框没有空间正确显示。 我会给容器一个完整的 width: 100%，left: 0 和 justify-content: center。 然后我将 margins-left 和 right 分配给内部项目。

所以你的 CSS 是这样的：

.Container {
    position: absolute;
    top: 25%;
    left: 0;
    display: flex;
    height: 50%;
    width: 100%;
    flex-flow: row wrap;
    justify-content: center;
}

.item {
    width: 16em;
    background-color: lightslategrey;
    margin: 0 30px;
}

这部分解决了问题，因为如果您减小窗口大小，您的内框仍然重叠。 要真正解决它，您可能需要mediaquery 来在调整窗口大小时使内框变小。

可能是这样的：

@media all and (max-width: 650px) {
  .item {
        width: 8em;
  }
}

这是一个代码笔，您可以查看结果：https://codepen.io/annabranco/pen/VEjXOL