html - 为什么 flexbox 在我的内容下方创建未使用的空间？

Question

我有一些幻灯片，我尝试使用 display: flex 等间隔内容，但它在我的内容下方和导航上方添加了一个大的空白区域。

当屏幕缩小到移动尺寸时，空白区域变得更加明显。

我不知道为什么要这样做，或者为什么将 display:flex 切换为 display:table 会把事情搞得更糟。

花了两天时间，我来寻求一些指导。

这是一个 test link到我所拥有的。单击 1 - 4 以使用 flex 进入屏幕。

<div class="slide" id="slide-one" data-slide="1">
  <p class="deck">You don’t have to wait until bad weather is imminent to prepare for a power outage. Take some time to get organized with these tips.</p>
  <div class="row">
    <div class="section" id="emergency-kit">
      <div class="rollover center">
        <div class="button-container">
          <div class="button"></div>
        </div>
        <div class="text">Create an Emergency Kit</div>
      </div>
      <div class="container">
        <img src="img/emergency-kit.png" alt="" />
      </div>
    </div>

    <div class="section" id="food-prep">
      <div class="rollover center">
        <div class="button-container">
          <div class="button"></div>
        </div>
        <div class="text">Prep Your Food</div>
      </div>
      <div class="container">
        <img src="img/fridge.png" alt="" />
      </div>
    </div>
  </div>

</div>

.row {
  display: flex;
  width:100%;
  flex-direction: row;
  margin-top: 20px;
}

#emergency-kit {
  width:40%;
  display: inline-block;

  .container {
    max-width: 263px;
  }
}

#food-prep {
  width:40%;
  display: inline-block;

  .container {
    max-width: 167px;
  }
}

此外，使用 flexslider用于幻灯片动画。

Answer 1

差距的来源与flexbox无关。您的 flex 容器 (.row) 嵌套在一个更大的容器中。

div.row

... 是 div.flex-viewport

的后代

...占据底部导航栏的所有高度。

在较小的屏幕上，div.row 甚至不再是 flex 容器。它已切换为 block 元素:

缩小差距的可能选择:

• 降低其中一个容器的高度
• 为 .flex-viewport 和 .row 之间的所有容器元素定义高度
• 将 display: flex 应用到所有容器，这样 child 就可以展开他们 parent 的整个高度