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

Posted 2023-03-04

【中文标题】justify-content: flex-end 的 Safari 问题；对齐项目：flex-end；

【英文标题】：Safari issue with justify-content: flex-end; align-items: 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 完全没问题。

【问题讨论】：

请注意正确的标记。这与 Adob​​e/Apache UI 框架无关，所以我删除了 Flex 标签。我怀疑它与 CSS 框架的 FlexBox 相关；所以我添加了 Flexbox 标签。如果不正确，您可以更正标记。

哪个版本的 Safari？

适用于 Windows 5.1.7 的最新版本

【参考方案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。