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?