带有列表标记的网格列，我需要每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/

#1 楼

Flexbox是一项CSS3技术。这意味着它相对较新，并且某些浏览器未完全提供对flex属性的支持。

这是一个破败：


IE 8和9不提供支持flexbox。如果您想在这些浏览器中使用flex属性，请不要浪费时间。 Flexbox polyfill进行了一段时间，但效果不佳且不再维护。
IE 10支持flexbox的早期版本，并需要供应商前缀。请注意，IE10不支持当前规格的某些属性（例如flex-grow，flex-shrink和flex-basis）。请参阅Flexbox 2012属性索引。
IE 11不错，但有故障。它基于当前的flexbox标准。有关某些问题，请参见本页上的“已知问题”标签。另请参阅：flex属性在IE中不起作用
使用Chrome，Firefox和Edge，您的环境就很好。您会发现一些小错误和不一致之处，但通常都可以轻松修复。您需要了解“隐含的最小Flex大小”，这有时会导致大小和滚动条问题。
Safari 9及更高版本支持不带前缀的当前flexbox规范。但是，较旧的Safari版本需要-webkit-前缀。有时min-width和max-width会导致对齐问题，可以用等效的flex解决。请参阅Flex项目在Safari中无法正确堆叠

有关Flexbox浏览器支持的完整说明，请参见以下页面：
http://caniuse.com/#search=flex

要快速添加许多（但不一定是全部）供应商前缀，请使用Autoprefixer。对于Safari，请参阅本文中有关某些前缀生成器不包含的-webkit-前缀的信息。

有关常见的Flex错误及其解决方法的列表，请参见Flexbug。

该网站有：


Flexbox标记信息


#2 楼

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

评论

它确实起作用；但是野生动物园中的其他Flex实用程序又如何呢？

–user1608841
18年7月4日在8:30
我将此代码与Safari（7.1+）的特定定位代码结合使用，以避免与其他浏览器发生冲突，非常感谢Saravana！ ryadel.com/en/…

–卡罗尔·麦凯（Carol McKay）
10月15日9:54