フレックスボックス垂直センタリングプラススティッキーフッタ

Question

私のページにフレックスボックスをたくさん使っています。私はそれを使用して6つのイメージを離れて離れて動作するうまく動作します。

これは容器（ピンクの背景）で包まれています。私はこれをウィンドウの垂直方向と水平方向に整列させたい。私はそれがうまく動作した。フレックスボックスのスティッキーフッターを追加するまで。私はそれらを一度に働かせることはできません。

私の主な問題は、サッカーであり、その中でスティッキーフッタが機能しています。 .containerクラスでflex: 1 0 auto;を使用します。

私はflex: 1;に値を変更する場合は、センターが、その後thteフッターは誰もがこの上でいくつかの光を当てることができます

サファリ

ではうまく動作しません。あなたは、もう少し正確にすることができます私は

https://codepen.io/gorelegacy/full/dXzbmK/

Answer 1

前にフレキシボックスを使ったことがありませんか？私のために、それはあなたのCodepenでうまく動作しています。または、ピンクの背景（大画面で黒い部分が見えます）が問題ですか？

1つのアドバイス、おそらくあなたの解決策はありません。 レイアウトを定義するのにFlexboxが使用されています。あなたは身体に屈曲方向を与えていることがわかります：行、いくつかの要素に一定の高さを与えます。

flex: 0 0 40px; 

結果は同じですが、それは少しバグや将来の奇妙な行動を防ぐことができます： 代わり

.bottom { 
    height: 40px; 
} 

を使用しての私が使用することをお勧めします。あなたのdivクラス= topにも同じことが起こります。

あなたの問題については、は、次のことを試してください。

body { 
display: flex; 
flex-direction: column; 
} 

.top { 
    flex: 0 0 40px; 
} 

.content { 
    flex: 1; 
    overflow-y: scroll; 
} 

.bottom { 
    flex: 0 0 40px; 
} 

あなた.top、.bottomと.contentは、あなたのHTML内のみと直接の子であることを確認してください。さもなければ、これは動作しません。

このようにして、上部と下部のバーが固定され、コンテンツが間にスペースを埋めるようになります。

EDIT： 垂直<div class="content">内のコンテンツを整列するには、あなたはあなたのCSSにこれを追加する必要があります。 （上のコードに沿って）

.content { 
    flex: 1; 
    overflow-y: scroll; //only if you want fixed footer 
    display: flex; 
    flex-direction: row; //column should also do fine, since you only have one child element 
    justify-content: center; 
    align-items: center; 
} 

.content-inner { //the only and direct child of content 
    margin: auto; 
}