Flexbox代码可在除Safari之外的所有浏览器上工作。为什么？ [英] Flexbox code working on all browsers except Safari. Why?

问题描述

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

Grid columns with list tags, I need to display in correct order per every 3 columns, with auto width enabled for every extra html list elements.

这是我的示例：

<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>

我想像这样转换输出：

1 4 7 10
2 5 8 11
3 6 9 12

这是我到目前为止所做的，在每个其他浏览器上工作绝对精细，但不兼容Safari浏览器，除非我添加： display：-webkit-flex ; 。

This is what I have tried so far and works absolutely fine on every other browser but not compatible with Safari browser unless I add this: display: -webkit-flex;.

     <style>
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;
}
    </style>

它的重要我得到这个工作的Safari浏览器到目前为止我似乎无法解决这个问题，我将提供任何帮助：）

its important I get this working for Safari browser so far I cant seem to solve this problem at all, I would appropriate any help :)

测试链接：
http://jsfiddle.net/rafcastro77/3zd7yspg/59/

推荐答案

测试链接： http://jsfiddle.net/rafcastro77/3zd7yspg/59/

我设法找到一种方式来修补这个替代的JQuery方式模仿flex-wrap：wrap with：

I managed to find a way to patch with this alternative JQuery way mimicking flex-wrap:wrap with:

 <style>

    .wrap{float:left; width:50px; border:1px solid #000;}

</style>
<script>

    var divs = $("ul > li");
    for(var i = 0; i < divs.length; i+=3) {
    divs.slice(i, i+3).wrapAll("<div class='wrap'></div>");
    }

</script>

safari或任何其他不支持flexbox的浏览器的工作版本： http://jsfiddle.net/rafcastro77/3zd7yspg/66/

A working version for safari or for any other browser not supporting flexbox: http://jsfiddle.net/rafcastro77/3zd7yspg/66/

这篇关于Flexbox代码可在除Safari之外的所有浏览器上工作。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！