Flexbox代码适用于除Safari之外的所有浏览器。为什么？

Question

Flexbox代码适用于除Safari之外的所有浏览器。为什么？

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

这是我的例子：

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

<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浏览器不兼容：display: -webkit-flex;。

我想像这样转换输出：

1 4 7 10

2 5 8 11

3 6 9 12

重要的是我到目前为止我的Safari浏览器工作，我似乎无法解决这个问题，我会适当的任何帮助:)

测试链接：

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

Answer 1

它适用于我显示：-webkit-inline-box;&nbsp;在野生动物园。