在Safari 6及更低版本中进行Flex-wrap

Question

我正在尝试创建一个网站，我希望使用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）。但它对我来说似乎不太清楚。我想知道的是：它是否受到支持？如果没有，是否有可能实现类似的影响？

Answer 1

简短回答

显然，没有办法在ios safari上使用属性flex-wrap＆lt; 6.1。

如果您想尝试解决方法

使用小型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

Answer 2

  

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

Safari＆lt; 6.1使用the first Flexbox specification。在这个时刻（2009年），没有像flex-wrap那样存在。

所以不，它不受支持。