justify-content: flex-end 的 Safari 问题；对齐项目：flex-end；答案

【问题标题】：Safari issue with justify-content: flex-end; align-items: flex-end;justify-content: flex-end 的 Safari 问题；对齐项目：flex-end；
【发布时间】：2013-12-06 17:00:15
【问题描述】：

我正在设计一个信使布局，我正在努力修复 Safari 上的一些问题，因为这似乎是一个兼容性问题。

http://animgram.com/fb/index.html 如果您在 Google Chrome 和 Safari 上打开此链接。谷歌浏览器是正确的视图，但在 Safari 上显示不正确。

我正在努力设置这个类。

.self {
justify-content: flex-end;
align-items: flex-end;
}

请注意：只有 Safari 是问题所在。 IE、Chrome 和 Firefox 完全没问题。

【问题讨论】：

请注意正确的标记。这与 Adobe/Apache UI 框架无关，所以我删除了 Flex 标签。我怀疑它与 CSS 框架的 FlexBox 相关；所以我添加了 Flexbox 标签。如果不正确，您可以更正标记。
哪个版本的 Safari？
适用于 Windows 5.1.7 的最新版本

标签： html css safari flexbox

【解决方案1】：

Safari

.foo {
    display: -webkit-box;
    -webkit-box-pack: start; /* justify-content */
    -webkit-box-align: start; /* align-items */
}

这可能会有所帮助：https://gist.github.com/cimmanon/727c9d558b374d27c5b6

【讨论】：

【解决方案2】：

使用-ms-flex-align: end !important;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。