flexbox垂直居中加上粘性页脚

Question

我在页面上经常使用flexbox。我在间隔开的6幅图像上使用它，效果很好。

将其包裹在容器中（粉红色背景）。我想要在窗口的垂直和水平方向上对齐。我把它弄好了。直到我在我的flexbox粘贴页脚中添加。我不能让他们同时工作。

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

如果我将值更改为flex: 1;，那么它会居中，但是这个页脚在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和.content是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;
}