Flexbox柱自我對齊底部

我試圖使用Flexbox。 http://css-tricks.com/almanac/properties/a/align-content/這顯示了很好的對齊選項;但我實際上想要一個頂部到底部的情況。Flexbox柱自我對齊底部

我想使用flexbox將div粘貼到父div的底部。與flex-direction: column和align-content: Space-between我可以做到這一點，但中間的div將在中心對齊，我希望中間的一個也堅持到頂端。

[頂]

[中]

[下]

align-self: flex-end將使它浮權利，而不是底部。

完整Flexbox的文檔：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2014-07-11 Laurens Kling

[This site could help]（http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&flex-direction=column&flex-wrap=nowrap&justify-content=flex-start&align-items=center&align -content =拉伸＆順序％5B％5D = 0＆柔性增長％5B％5D = 0＆柔性收縮％5B％5D = 1＆柔性基礎％5B％5D = 200像素和對準自％5B％5D =汽車＆順序％5B％5D = 0＆柔性生長％5B％5D = 0＆柔性收縮％5B％5D = 1＆柔性基礎％5B％5D = 100％25對準自％5B％5D =汽車＆順序％5B％5D = 0＆柔性增長％5B％5D = 0＆柔性收縮％5B ％5D = 1＆柔性基礎％5B％5D = 200像素＆對準自％5B％5D =自動）。 – misterManSam

切題，但這似乎是荒謬的，這種佈局不容易解決的任何柔性箱 – coffeecola

@coffeecola不要說這是不容易解決，當你還沒有得到的知識。 Flex非常強大，謝謝檢查我的答案。 – T04435

我發現我自己的解決方案，我將在這裏添加它的文檔值;

如果你給中間塊height: 100%它會佔用中間的房間。所以底部區塊將位於實際底部，頂部和中部位於頂部。

UPDATE：這並不適用於Chrome的工作...

UPDATE：發現，對於FF/Chrome的運作方式：設置在一個較大的數字Flex的增長（1就夠了）爲[中]會使其完全中等大小。更多信息：http://css-tricks.com/almanac/properties/f/flex-grow/

來源

2014-07-14 09:31:48

我沒有按照你的答案，但這是我現在遇到麻煩的確切問題。你能分享你的解決方案使用的實際標記和CSS嗎？ – corradomatt

我會盡力發佈它，任何專業的stackoverflow提示？我是否在我的問題中添加它？ –

使用'flex-grow：1;'在IE11中工作 – philk

我有點遲到了，但對於其他人試圖完成你應該能夠做同樣的可能是相關的：

margin-top: auto

的元素有問題，它應該到底部。應該做的火狐，鉻和Safari瀏覽器的伎倆。

來源

2016-02-01 07:41:36

是的，要推動一個元素到最後，這會做到這一點。 Flexbox對待保證金有點不同 –

在幾小時的WTF之後，這確實欺騙了我。它也適用於IE（11反正，我還沒有在其他版本測試） –

任何人都可以請解釋爲什麼它的工作？ – PlusA

基本上，答案是給最後的中間分子的柔性成長1級的代碼如下：

.middle-last{ 
    flex-grow: 1; // assuming none of the other have flex-grow set 
}

謝謝，T04435。

來源

2017-01-19 07:35:32 T04435

Flexbox柱自我對齊底部

回答

相關問題