Safari 9 - flexbox align-self：flex-end does not work

我無法將子元素對齊到其父元素的末尾。兩者都是柔性元素。父元素具有高度：100％，並且孩子具有：align-self：flex-end。此設置適用於所有主流瀏覽器（Firefox，Chrome，IE/Edge），但在Safari 9中（以及一些支持Flexbox的舊版本）無法使用。Safari 9 - flexbox align-self：flex-end does not work

下面是它的外觀： screenshot of the problem

下面是複製粘貼例如，你可以看到它在瀏覽器，但在Safari其在中間：

http://cdpn.io/usrbowe/pen/JXBjvv

的問題是， .Row是align-items：center，它在Safari中具有更高的優先級，因此它將中心的子元素對齊。

來源

2016-04-21 usrbowe

如果你可以粘貼一個工作示例來證明它會更好。 –

好的，我在codepen中添加了工作示例 – usrbowe

尋求代碼幫助的問題必須包含在問題本身**中重現**所需的最短代碼。雖然您提供了[**鏈接到示例或網站**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-如果鏈接變得無效，那麼你的問題對於其他具有相同問題的未來SO用戶將沒有任何價值。 –

在剝離出大多數與問題無關的代碼後，我意識到這不是align-items，這給你帶來麻煩。它是align-content，其中align-self不覆蓋。你提到優先，但在這個例子中你已經有align-items: flex-start;重寫center。無論如何，這不是問題。

但是，它似乎確實是瀏覽器的怪癖。根據可靠flexbox spec（和my favorite flex guide）align-content不應該對單線柔性容器有任何影響。但是，由於Safari的某些原因，它是。

舉個例子，我建議你一起刪除align-content。它看起來並不像你正在尋找它實際上沿橫軸居中的任何東西。示例中使用的內容也支持該理論。如果這不正確，並且應該有涉及其他內容的參與，請更新代碼示例。

來源

2016-04-22 15:51:38 alexbea

我不小心刪除了我的Codepen演示。轉載於此：https://codepen.io/alexbea/pen/RpaNQq – alexbea

Safari 9 - flexbox align-self：flex-end does not work

回答

相關問題