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

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浏览器非常重要，我似乎根本无法解决此问题，我会提供任何帮助:)

Answer 1

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

这是一个破败：

• IE 8和9 不支持flexbox。如果您想在这些浏览器中使用flex属性，请不要浪费时间。一个 Flexbox的填充工具就传开了一段时间，但它没有很好地工作，不再保留。

• 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-了解某些前缀生成器不包含的前缀。