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

Question

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

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

我不知道为什么会这样做，或者为什么将display:table转换为flex会让事情变得更糟。

花了两天后，我来找一些指导。

这是我所拥有的test link。单击1 - 4以使用<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; } } 进入屏幕。

DataSource

另外，使用flexslider作为幻灯片动画。

Answer 1

差距的来源与flexbox无关。您的Flex容器（.row）嵌套在一个更大的容器中。

div.row

...是 div.flex-viewport

的后代

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

在较小的屏幕上，div.row甚至不再是灵活容器。它切换到块元素：

缩小差距的可能选项：

• 降低其中一个容器的高度
• 定义.flex-viewport和.row
之间所有容器元素的高度
• 将display: flex应用于所有容器，以便子级可以扩展其父级的完整高度