html – Flexbox代码在除Safari之外的所有浏览器上工作.为什么？

具有列表标签的网格列,我需要按照每3列显示正确的顺序,并为每个额外的html列表元素启用自动宽度.

这是我的例子：

<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>

我想转换这样的输出：

1 4 7 10
2 5 8 11
3 6 9 12

这是我迄今为止所尝试的,并且在其他浏览器上工作得很好,但与Safari浏览器不兼容,除非我添加：display：-webkit-flex ;.

<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>

它的重要我得到这个工作为Safari浏览器到目前为止我似乎无法解决这个问题,我会适当的任何帮助:)

测试链接：
http://jsfiddle.net/rafcastro77/3zd7yspg/59/

解决方法

FlexBox是一种CSS3技术.这意味着它相对较新,一些浏览器不能完全支持Flex属性.

这是一个失败：

> IE 8和9不支持flexBox.如果您想在这些浏览器中使用flex属性,不要浪费时间. flexbox polyfill出场了一段时间,但没有发挥好的作用,不再维持.
> IE 10支持previous version of flexbox,需要vendor prefixes.请注意,IE10中不支持当前规范的某些属性(如flex-grow,flex-shrink和flex-based).见Flexbox 2012 Property Index.
> IE 11是好的,但是越野车.它基于current flexbox standard.有关某些问题,请参阅this page上的“已知问题”选项卡.另见：flex property not working in IE
>使用Chrome,Firefox和Edge,您都很棒.你会发现轻微的错误和不一致,但通常很容易修复.您需要注意Implied Minimum Flex Sizing,这有时会导致尺寸和滚动条问题.
> Safari版本9及以上版本支持当前的FlexBox规范,无前缀.然而,较旧的Safari版本需要-webkit-前缀.有时,最小宽度和最大宽度会导致对齐问题,可以通过弹性等效方法解决.见Flex items not stacking properly in Safari

要了解FlexBox浏览器支持的完整信息,请参阅此页面：
http://caniuse.com/#search=flex

要添加许多(但不一定全部)供应商前缀的快速方法,请使用Autoprefixer.对于Safari,有关前缀生成器不包含的-webkit-前缀,请参阅this article.

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

另外,在这个网站上,有：

> Flexbox Tag Info> FlexBox文档

原文地址：https://www.jb51.cc/html/230786.html