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浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)

测试链接:

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

Answer 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,你就会很好.你会发现小错误和不一致,但通常很容易修复.您需要了解Implied Minimum Flex Sizing,这有时会导致调整大小和滚动条问题.

• Safari版本9及更高版本支持当前没有前缀的flexbox规范.但是,较旧的Safari版本需要-webkit-前缀.有时min-width并max-width造成可与解决对齐问题flex等价物.请参阅 Safari中未正确堆叠的Flex项目

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

要快速添加许多(但不一定是所有)供应商前缀,请使用Autoprefixer.对于Safari,请参阅此文章,-webkit-了解一些前缀生成器不包含的前缀.

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

此外,在这个网站上,有:

• Flexbox标签信息

Answer 2

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