Question

当宽度太小而无法同时显示两者时，包装弹性盒遇到了问题。这是全屏屏幕：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上看到了一些问题，这些问题会在您的项目框上强制执行此操作。主要问题是将容器的宽度限制为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;
  }
}

这里是一个Codepen，因此您可以看到结果：https://codepen.io/annabranco/pen/VEjXOL

卡在负责任的柔性盒上

1 个答案: