我无法将子元素与其父元素的末尾对齐。两者都是 flex 元素。父元素的高度为:100%，子元素的高度为:align-self: flex-end。 此设置适用于所有主流浏览器(Firefox、Chrome、IE/Edge)，但不适用于 Safari 9(以及一些也支持 flexbox 的旧版本)。
这是它的样子: screenshot of the problem
这是复制粘贴的例子，你可以看到它在 Chrome 中有效，但在 Safari 中它在中间:
http://cdpn.io/usrbowe/pen/JXBjvv
问题是.Row上是align-items: center，在Safari中优先级高，所以子元素居中对齐。
最佳答案
在去掉大部分与问题无关的代码后，我意识到不是 align-items 给你带来了麻烦。它是 align-content，align-self 不会覆盖。您提到 align-items: center; 优先，但在示例中您有 align-items: flex-start; 覆盖 center .无论如何，这不是问题。
不过，这似乎确实是浏览器的一个怪癖。据信flexbox spec (和 my favorite flex guide )align-content 不应对单行 flex 容器产生任何影响。但是，出于某种原因，在 Safari 中是这样。
根据示例，我建议您完全删除 align-content。看起来您并不是在寻找它来实际使任何东西沿横轴居中。示例中使用的内容也支持该理论。如果这不正确并且应该涉及其他内容，请更新代码示例。
关于html - Safari 9 - flexbox align-self : flex-end doesnt work，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36770602/