Question

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

Flexbox是一种CSS3技术。这意味着它相对较新，有些浏览器不提供对flex属性的完全支持。

这是一个破败：

IE 8和9 不支持支持flexbox。如果您想在这些浏览器中使用flex属性，请不要浪费时间。 flexbox polyfill进行了一段时间的轮次，但是效果并不好，不再维护。
IE 10支持previous version of flexbox并需要vendor prefixes。请注意，IE10不支持当前规范中的某些属性（例如flex-grow，flex-shrink和flex-basis）。请参阅Flexbox 2012 Property Index。
IE 11很好，但有些错误。它基于current flexbox standard。有关一些问题，请参阅this page上的 KNOWN ISSUES 标签。另请参阅：flex property not working in IE
借助Chrome，Firefox和Edge，您的身心健康。你会发现小错误和不一致，但通常很容易修复。您需要了解Implied Minimum Flex Sizing，这有时会导致调整大小和滚动条问题。
Safari版本9及更高版本支持当前不带前缀的flexbox规范。但是，较旧的Safari版本需要-webkit-前缀。有时min-width和max-width导致对齐问题，可以使用flex等效项解决。请参阅Flex items not stacking properly in Safari

有关flexbox浏览器支持的完整评论，请参阅此页面： http://caniuse.com/#search=flex

要快速添加许多（但不一定是所有）供应商前缀，请使用Autoprefixer。对于Safari，请参阅this article，了解某些前缀生成器不包含的-webkit-前缀。

有关常见弹性错误及其解决方法的列表，请参阅Flexbugs。

此外，在这个网站上还有：

Flexbox Tag Info

Answer 2

它适用于我在safari中的显示：-webkit-inline-box; 。

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

2 个答案: