挠曲盒垂直对中加上粘性页脚

Question

我在我的页面上经常使用柔性盒。我把它用在6张相距相隔的图像上，效果很好。

这是包装在一个容器(粉红色背景)。我想要这个垂直和水平的窗口对齐。我做得很好。直到我加入了我的柔性箱粘脚。我不能让他们同时工作。

我的主要问题是旅行，让粘粘的脚在里面工作。我在flex: 1 0 auto;类上使用.container。

如果我将值更改为flex: 1;，它将居中，但该页脚在safari中不能正常工作。

有人能解释一下这件事吗。我以前从来没有用过柔性箱

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

Answer 1

你能更准确一点吗？对我来说，在你的书房里效果很好。还是粉红背景(在大屏幕上显示一些黑色)是问题所在？

一个建议，可能不是您的解决方案: 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">中的内容，您应该将其添加到<div class="content">中。(连同上面的代码)

.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;
}