將一個項目垂直居中，將另一個與動態高度底部對齊（彈性框）

Question

這是我多次遇到的問題，因此我想這一次將尋求一個明確的答案。 我想做的是，使一個元素垂直居中，同時讓另一個元素充當“頁腳”，並捕捉到同一容器的底部。 像這樣：

問題在於頁腳將具有動態高度。 預期的行為是，如果有足夠的空間，則中間元素將保持垂直居中； 如果頁腳太大而無法實現，則居中內容將向上移動，為頁腳騰出空間。

我找到的最接近的解決方案是這個問題 。 但是，就像我看到的所有其他解決方案一樣，它需要知道頁腳的高度。

我有一種預感，這與flexbox是不可能的。 我最終得到的解決方案總是回到經典position: relative包裝， position: absolute頁腳上的position: absolute 。

如果您想看看我上次嘗試的失敗之處，這里有一個演示小提琴 。

 flex-container { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid blue; height: 300px; width: 300px; } flex-container>flex-spacer { margin-top: auto; visibility: hidden; } flex-container>flex-item { display: flex; } flex-container>flex-footer { margin-top: auto; margin-bottom: auto; } flex-container>flex-spacer, flex-container>flex-footer { border: 4px solid chartreuse; } flex-container>flex-item>flex-item { border: 4px solid aqua; height: 50px; width: 50px; margin: 0 5px; } 

 <flex-container> <flex-spacer></flex-spacer> <flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-item> <flex-footer> this is the footer element<br /> this is the footer element<br /> </flex-footer> </flex-container> 

Answer 1

您需要的是一個用於整個容器的flexbox，以及一個用於內容本身的嵌套flexbox。 這使您可以應用兩個不同的對齊規則，同時保持flexbox聞名的“靈活性”。

您的其他一些元素（例如“間隔符”）是不必要的。

 flex-container { display: flex; flex-direction:column; align-items: center; justify-content:flex-end; border: 4px solid blue; height: 300px; width: 300px; } flex-container > flex-center-content { display:flex; height:100%; width:100%; align-items:center; justify-content:center; } flex-container > flex-footer { border: 4px solid chartreuse; } flex-container > flex-center-content > flex-item { border: 4px solid aqua; height: 50px; width: 50px; margin: 0 5px; } 

 <flex-container> <flex-center-content> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-center-content> <flex-footer> this is the footer element<br /> this is the footer element<br /> this is footeeeeer<br> look how tall I am<br> and how much I push things<br> </flex-footer> </flex-container> 

小提琴