flexbox垂直居中加一个粘脚

Question

我的页面上使用flexbox很多。我使用它在6间隔开的图像，它工作正常。

这是包装在一个容器（粉红色背景）。我希望这个窗口垂直和水平对齐。我得到它工作正常。直到我添加了我的flexbox粘性页脚。我不能让他们同时工作。

我的主要问题是Safari浏览器，让粘性页脚工作。 我在.container课上使用flex: 1 0 auto;。

如果我的值更改为flex: 1;它集中但随后thte页脚不会在Safari

工作以及任何人都可以阐明这一些轻。我从来没有使用Flexbox的

https://codepen.io/gorelegacy/full/dXzbmK/

Answer 1

之前，你可能会有点更准确？对我来说，它在你的Codepen中工作得很好。或者是粉红色的背景（在大屏幕上显示一些黑色）的问题？

一个建议，可能不是您的解决方案： Flexbox用于定义布局。我看到你给身体一个弯曲的方向：排，你给一些元素固定的高度。 而不是使用

.bottom { 
    height: 40px; 
} 

的，我建议使用：

flex: 0 0 40px; 

的结果是一样的，但它可以防止小虫子或在未来怪异的行为。你的div class = top也一样。

关于您的问题，尝试以下方法：

body { 
display: flex; 
flex-direction: column; 
} 

.top { 
    flex: 0 0 40px; 
} 

.content { 
    flex: 1; 
    overflow-y: scroll; 
} 

.bottom { 
    flex: 0 0 40px; 
} 

确保您的.TOP，.bottom和。内容是在HTML中唯一和直接孩子。否则这将无法正常工作。

通过这种方式，顶部和底部的横条是固定的，而您的内容填充了中间的空间。

编辑： 要垂直对齐<div class="content">中的内容，你应该添加到您的CSS。 （与上面的代码一起）

.content { 
    flex: 1; 
    overflow-y: scroll; //only if you want fixed footer 
    display: flex; 
    flex-direction: row; //column should also do fine, since you only have one child element 
    justify-content: center; 
    align-items: center; 
} 

.content-inner { //the only and direct child of content 
    margin: auto; 
}