Flexbox的粘页脚

Question

我试图实现或多或少相同的东西在这个问题描述：

• Align an element to bottom with flexbox

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

我设置的两张卡中已经存在的Flex上下文（它们的高度被拉伸以实现Flexbox）：

卡里面我有一系列的元素：

• 报头
• 主体
• 页脚（蓝色DIV）

我想要的是页脚始终坚持到底部。

的三个要素的内部容器如上所述具有以下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没有高度？

这里有一个codepen例如：https://codepen.io/vlrprbttst/pen/QgWbEr

Answer 1

添加display: flex到.card。

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

它也会将页脚钉在底部。

revised demo

---

对于一个更全面的修复（如有必要），您将需要的.container-inner的flex-direction切换到column，并调整到Flex项目占此开关。

revised demo

---

为什么align-self: flex-end和margin-top: auto没有工作的原因与在多线柔性容器的弯曲线做。

实质上，由于align-content的工作原理，您的页脚无法跳出其弯曲线并转移到容器的底部。

有关完整的说明，看到这个帖子：

• How does flex-wrap work with align-self, align-items and align-content?