【问题标题】：Flex-wrap in Safari 6 and lowerSafari 6 及更低版本中的 Flex-wrap
【发布时间】：2014-09-29 14:18:38
【问题描述】：

我正在尝试创建一个网站，我希望使用 flexbox 来帮助我进行布局。我已经让它与大多数流行的浏览器一起工作，除了 6.1 版以下的 Safari。我遇到的主要问题是 flex-wrap。我希望元素自动水平换行。所以我想要 Safari 6 及更低版本的等价物： display: flex; -webkit-flex-flow: row wrap;

有没有办法做到这一点？我找到的最接近答案的是它可能不受支持（来自这个问题：Safari 6 (iOS 6) flex layout doesn't wrap elements）。但这对我来说似乎不是很清楚。我想知道的是：是否支持？如果没有，是否有可能达到类似的效果？

【问题讨论】：

Safari 6 及更低版本使用不同（旧）版本的弹性框语法。虽然我不知道如何解决您的具体问题，但这篇文章可能会有所帮助：css-tricks.com/using-flexbox。此外，网站 caniuse 是了解不同浏览器版本支持的内容的绝佳资源：caniuse.com/#feat=flexbox。 Safari 6 的用户数量非常少，因此可能不值得您花时间尝试和支持它。
谢谢！但是我已经知道它使用了不同的语法。我的问题特别是关于 flex-wrap。我似乎找不到合适的语法。
根据本文中的一段话：dev.opera.com/articles/advanced-cross-browser-flexbox，旧语法中没有 flex-wrap 的等价物。您可能需要重新考虑您的方法。

标签： html ios css safari flexbox

【解决方案1】：

简答

显然没有办法在ios safari flex-wrap。

如果您想尝试解决方法

使用小型 Javscript 测试（或 Modernizr）来检测缺少的 flexwrap 属性：

// Detects flex wrap for current browser
var has_flex_wrap_support = function () {
  let d = document.documentElement.style
  return (('flexWrap' in d) || ('WebkitFlexWrap' in d) || ('msFlexWrap' in d));
}

// Add the class no-flexwrap to body depending on result of test
var check_for_flexwrap = function () {
  if ( ! has_flex_wrap_support() )
    document.body.classList.add('no-flexwrap');
};

check_for_flexwrap();

在你的 css 中使用 inline-block 来获得类似的水平环绕效果：

.no-flexwrap .container { display: block; }
.no-flexwrap .container__children { display: inline-block; }

另见：

Almost complete guide to flexbox without flexbox.

【讨论】：

@anora 看到我的回答，ios

【解决方案2】：

我找到的最接近答案的是它可能不受支持。但这对我来说似乎不是很清楚。

Safari the first Flexbox specification。此时（2009 年），没有像 flex-wrap 这样的存在。

所以不，不支持。

【讨论】：