时间戳

首页 > 解决方案 > 卡在负责任的弹性盒子上

html - 卡在负责任的弹性盒子上

问题描述

当宽度太小而无法同时显示时，包装 flexbox 会出现问题。这是一个全屏屏幕：显示全屏站点

所以如果减少浏览器宽度会发生以下情况：减少宽度

现在，如果我再次减小宽度，它看起来像这样：比以前减少了 1 毫米

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

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>

标签： htmlcssflexboxformatting

解决方案

我在您的 CSS 上看到了一些问题，这些问题会在您的 box item上强制执行此行为。主要问题是您将容器的宽度限制为 40%，然后当您调整窗口大小时，内部框没有空间正确显示。我会给容器一个 full width: 100% , left: 0和justify-content: center。然后我会为内部项目提供左右边距。

所以你的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;
}

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

它可能是这样的：

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

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

推荐阅读