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 102 5 8 113 6 9 12重要的是我到目前为止我的Safari浏览器工作，我似乎无法解决这个问题，我会适当的任何帮助:)测试链接：http://jsfiddle.net/rafcastro77/3zd7yspg/59/

Answer 1

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