Flexbox代码可在除Safari之外的所有浏览器上使用。为什么?


78

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

Answers:


94

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

这是一个破败:

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

  • IE 10支持flexbox的早期版本,并需要供应商前缀。要知道,从目前的规范某些属性不支持IE10(例如flex-growflex-shrinkflex-basis)。请参阅Flexbox 2012属性索引

  • IE 11很好,但是有故障。它基于当前的flexbox标准。有关某些问题,请参见本页上的“已知问题”标签。另请参阅:flex属性在IE中不起作用

  • 有了Chrome,Firefox和Edge,您周围的一切都很好。您会发现一些小错误和不一致之处,但通常都有一些简单的修复程序。您需要了解“隐含的最小Flex大小”,这有时会导致大小和滚动条问题。

  • Safari 9及更高版本支持当前的Flexbox规范,不带前缀。但是,较早的Safari版本需要-webkit-前缀。有时min-widthmax-width事业对齐问题可与解决flex当量。请参阅 Flex项目在Safari中无法正确堆叠

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

为了快速添加许多(但不一定是全部)供应商前缀,请使用Autoprefixer。对于Safari,请参阅本文-webkit-了解某些前缀生成器不包含的前缀。

有关常见的Flex错误及其解决方法的列表,请参见Flexbugs

另外,在此站点上,还有:


24

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


2
它确实起作用;但是野生动物园中的其他Flex实用程序呢?
user1608841

我将其与Safari(7.1+)的特定定位代码结合使用,以避免与其他浏览器发生冲突,非常感谢Saravana! ryadel.com/en/...
卡罗尔·麦凯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.