flexbox 粘性页脚

Question

我正在努力实现或多或少与这个问题中描述的相同的内容：

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

我有两张已经在 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 上下文不会彼此说话并且没有关系？或者可能没有内部容器的高度，当内容流结束时弹性上下文结束？

有没有办法使用 flexbox 的无高度来实现这一点？

Answer 1

将 display: flex 添加到 .card。

这将允许 children 使用 .container 的完整高度。

它还会将页脚固定在底部。

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

align-self: flex-end 和 margin-top: auto 不起作用的原因与 multi-line 弹性容器中的弹性线有关。

从本质上讲，由于 align-content 的工作方式，您的页脚无法突破其弹性线并移动到容器底部。

有关完整说明，请参阅此 post：

flexbox sticky footer