flexbox垂直居中加一個粘腳

Question

我的頁面上使用flexbox很多。我使用它在6間隔開的圖像，它工作正常。

這是包裝在一個容器（粉紅色背景）。我希望這個窗口垂直和水平對齊。我得到它工作正常。直到我添加了我的flexbox粘性頁腳。我不能讓他們同時工作。

我的主要問題是Safari瀏覽器，讓粘性頁腳工作。 我在.container課上使用flex: 1 0 auto;。

如果我的值更改爲flex: 1;它集中但隨後thte頁腳不會在Safari

工作以及任何人都可以闡明這一些輕。我從來沒有使用Flexbox的

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

Answer 1

之前，你可能會有點更準確？對我來說，它在你的Codepen中工作得很好。或者是粉紅色的背景（在大屏幕上顯示一些黑色）的問題？

一個建議，可能不是您的解決方案： Flexbox用於定義佈局。我看到你給身體一個彎曲的方向：排，你給一些元素固定的高度。 而不是使用

.bottom { 
    height: 40px; 
} 

的，我建議使用：

flex: 0 0 40px; 

的結果是一樣的，但它可以防止小蟲子或在未來怪異的行爲。你的div class = 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和。內容是在HTML中唯一和直接孩子。否則這將無法正常工作。

通過這種方式，頂部和底部的橫條是固定的，而您的內容填充了中間的空間。

編輯： 要垂直對齊<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; 
}