Jquery Flexbox代码适用于除Safari之外的所有浏览器，它们是可选的还是补丁？

我需要每3列以正确的顺序显示，并为每个额外的html列表元素启用自动宽度

这是我的例子：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

这是我迄今为止尝试过的，在所有其他浏览器上都运行良好，但与Safari浏览器不兼容

ul {
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 150px;
  width: auto;
}

li {
  float: left;
  display: inline-block;
  list-style: none;
  position: relative;
  height: 50px;
  width: 50px;
}

他们是生产我产品的另一种方式吗？仅仅是safari浏览器，或者是css、js/jquery的替代方式，或者可能是一些php过滤器将html循环到列表变量/数组

使用jquery修补此问题的最接近的示例是使用以下代码模拟flex wrap:wrap：

<style>
#wrap{float:left; width:50px; height:150px; clear: both;}
</style>
<script>
$("ul > :lt(3)").wrapAll( "<ul id='wrape'></ul>" ); 
</script>

#包裹{浮动：左；宽度：50px；高度：150px；清除：两个；}
$（“ul>：lt（3）”）.wrapAll（“”；

然而，我似乎找不到一种方法，每3次重复一次

重要的是，我要让它在Safari浏览器上工作，到目前为止，我似乎根本无法解决这个问题，我需要任何帮助：）

测试链接：

我终于成功地修补了它。下面是我的示例：

   <style>
.new{float:left; width:50px; border:1px solid #000; color:green; }
</style>
<script>
   var divs = $("ul > li");
    for(var i = 0; i < divs.length; i+=3) {
      divs.slice(i, i+3).wrapAll("<div class='new'></div>");
    }
</script>

.new{float:left；宽度：50px；边框：1px solid#000；颜色：绿色；}
var divs=$（“ul>li”）；
对于（变量i=0；i

具有输出的工作版本：

---

如果其他人正在寻找替代flexbox的方法，我希望这能帮助他们

Safari有什么不同。。。我们谈论的是哪一个Safari版本？这有用吗<代码>柔性流：列换行。。。我现在不能在safari中测试弯曲方向/弯曲包裹，而是宽度：25%；保证金：0自动；对于使用safari 5.1.7的li elementim，我知道最新的safari版本可能支持它，但我需要它在大多数浏览器上工作。我尝试了flex-flow:column-wrap；那不行。宽度：列表上的25%不够好，我需要它工作，即使要添加更多的元素，也需要灵活

   <style>
.new{float:left; width:50px; border:1px solid #000; color:green; }
</style>
<script>
   var divs = $("ul > li");
    for(var i = 0; i < divs.length; i+=3) {
      divs.slice(i, i+3).wrapAll("<div class='new'></div>");
    }
</script>