flexbox 粘性页脚答案

【问题标题】：flexbox sticky footerflexbox 粘性页脚
【发布时间】：2017-11-04 04:37:05
【问题描述】：

我正在尝试实现或多或少与此问题中描述的相同：

除了我不能使用固定高度。

我有两张已经在 flex 上下文中的卡片（它们的高度用 flexbox 拉伸）：

在卡片里面我有一系列元素：

我想要的是始终粘在底部的页脚。

上述三个元素的内部容器有如下CSS：

.card-inner {
  display:flex;
  flex-flow :row wrap;
  align-items: stretch;
}

里面的物品有

.card {
  &-header,
  &-body {
    flex: 0 1 100%;
  }
  &-footer {
    flex: 0 1 100%;
    align-self:flex-end;
    margin-top: auto;
  }
}

我原以为 align-self:flex-end 或 margin-top: auto 会将页脚 div 推到卡片下方，但这并没有发生。

也许这两个 flex 上下文不说话彼此并且不相关？或者可能没有内部容器的高度，flex 上下文在内容流结束时结束？

有没有办法通过 flexbox 不使用高度来实现这一点？

【问题讨论】：

【解决方案1】：

将display: flex 添加到.card。

这将允许孩子们使用.container的整个高度。

它还将页脚固定在底部。

如需更全面的修复（如有必要），您需要将 flex-direction 的 .container-inner 切换为 column，并调整弹性项目以解决此切换问题。

align-self: flex-end 和 margin-top: auto 不起作用的原因与多行 flex 容器中的 flex 行有关。

基本上，由于align-content 的工作方式，您的页脚无法脱离其柔性线并移动到容器底部。

完整的解释请看这篇文章：

【讨论】：