Safari 9- flexbox align-self: flex-end不起作用
Safari 9- flexbox align-self: flex-end不起作用
提问于 2016-04-21 21:07:55
我无法将子元素与其父元素的末尾对齐。两者都是flex元素。父元素的高度为100%，子元素的高度为: align-self: flex-end。此设置适用于所有主流浏览器(Firefox、Chrome、IE/Edge)，但不适用于Safari9(以及一些支持flexbox的旧版本)。
它看起来是这样的：screenshot of the problem
这是一个复制-粘贴的例子，你可以看到它在Chrome中工作，但在Safari中它处于中间位置：
http://cdpn.io/usrbowe/pen/JXBjvv问题是在.Row上是align-items: center，它在Safari中具有更高的优先级，所以它将子元素对齐在中心。
回答 1
Stack Overflow用户
发布于 2016-04-22 23:51:39
在剔除了与这个问题无关的大部分代码后，我意识到在这里给你带来麻烦的不是align-items。它是align-self不覆盖的align-content。你提到align-items: center;是优先的，但是在这个例子中，你已经让align-items: flex-start;覆盖了center。无论如何，这不是问题所在。
然而，这看起来确实是一个浏览器的怪癖。根据可信的flexbox spec (和my favorite flex guide)的说法，align-content应该不会对单行flex容器产生任何影响。然而，出于某种原因，在Safari中是这样的。
考虑到这个示例，我建议您完全删除align-content。看起来你并不是想让它在交叉轴上居中。示例中使用的内容也支持这一理论。如果这是不正确的，并且应该有其他内容可以发挥作用，请更新代码示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36770602
复制相关文章
相似问题
腾讯云开发者
