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浏览器到目前为止我似乎无法解决这个问题，我会适当的任何帮助:)
testing链接：
http://jsfiddle.net/rafcastro77/3zd7yspg/59/
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和边缘，你很好。 你会发现小错误和不一致，但通常很容易修复。 您需要了解Implied Minimum Flex Sizing ，这有时会导致大小和滚动条问题。
-
Safari 9和更高版本支持当前没有前缀的flexbox规范。 旧的Safari版本，但是，需要
-webkit-前缀。 有时min-width和max-width会导致alignment问题，可以用flex等价物来解决。 请参阅在Safari中未正确堆叠的Flex项目
有关flexbox浏览器支持的完整评论，请参阅此页： http ://caniuse.com/#search=flex
要快速添加许多（但不一定是全部）供应商前缀，请使用Autoprefixer 。 对于Safari，请参阅这篇文章的-webkit-前缀，一些前缀生成器不包括。
有关常见flex错误及其解决方法的列表，请参阅Flexbugs 。
另外，在这个网站上，有：
- Flexbox标签信息
它适用于我显示：-webkit-inline-box; 在徒步旅行队。
