フレキシボックススティッキーフッター

Question

私はこの質問で説明されているものの多かれ少なかれ同じことを達成しようとしている：私は固定の高さを使用することができないという事実を除いて

• Align an element to bottom with flexbox

。

私は（その高さは、フレキシボックスに引き伸ばされる）フレックス文脈に既にある2枚のカードを設定している：

：

カード内の

私は、一連の要素を持っています

• ヘッダ
• 体
• フッタ（青DIV）

私が望むのは、フッターが常に底に付くことです。

上述した3つの要素の内側容器は、以下の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; 
    } 
} 

を有するIはalign-self:flex-end又はmargin-top: autoフッターをプッシュしていると予想しているであろうカードを分割するが、これは起こっていない。

多分、2つのフレックス・コンテキストは、が互いにと発言していなくても関係ありませんか？または、内側のコンテナに高さがない場合、コンテンツフローが終了したときにフレックスコンテキストが終了しますか？

フレックスボックスで高さを使用しないでこれを達成する方法はありますか？ここで

はcodepen例です：https://codepen.io/vlrprbttst/pen/QgWbEr

Answer 1

は.cardにdisplay: flexを追加します。

これは、子供たちが.containerの完全な高さを使用できるようになります。

また、フッターを下部に固定します。より包括的な修正（必要な場合）については

revised demo

---

、あなたはcolumnに.container-innerのflex-directionを切り替える必要があり、このスイッチを説明するためにフレックス項目に調整を行います。

revised demo

---

align-self: flex-endとmargin-top: autoが機能しなかった理由は、複数行フレックスコンテナ内にフレックスラインに関係しています。

本質的に、align-contentが機能するため、フッターはフレックスラインから抜け出してコンテナの底に移動することはできません。完全な説明については

、この記事を参照してください。

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