Question

我试图与此问题中描述的内容大致相同：

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

我已经设置了两张已经处于灵活上下文中的牌（他们的高度是用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实现这一目标？

Answer 1

将display: flex添加到.card。

这将允许孩子们使用.container的全高。

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

要获得更全面的修复（如有必要），您需要将flex-direction .container-inner切换为column，并调整Flex项目以考虑此切换。

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

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

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