Html Flexbox 代码适用于除 Safari 之外的所有浏览器。为什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35137085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox code working on all browsers except Safari. Why?
提问by rafcastro77
Grid columns with list tags, I need to display in correct order per every 3 columns, with auto width enabled for every extra HTML list elements.
带有列表标签的网格列，我需要每 3 列以正确的顺序显示，并为每个额外的 HTML 列表元素启用自动宽度。
This is my example:
这是我的例子：
<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>display: -webkit-flex;display: -webkit-flex;。I want to convert the output like this:
我想像这样转换输出：
1 4 7 10
2 5 8 11
3 6 9 12
It's important I get this working for Safari browser so far I cant seem to solve this problem at all, I would appropriate any help :)
重要的是我让它在 Safari 浏览器上工作，到目前为止我似乎根本无法解决这个问题，我会提供任何帮助:)
Test link:
测试链接：
回答by Michael Benjamin
Flexbox is a CSS3 technology. This means it's relatively new and some browsers don't provide full support for flex properties.
Flexbox 是一种 CSS3 技术。这意味着它相对较新，一些浏览器不提供对 flex 属性的完全支持。
Here's a run-down:
这是一个破败：
IE 8 and 9 do notsupport flexbox. If you're wanting to use flex properties in these browsers, don't bother wasting your time. A flexbox polyfillmade the rounds for a while, but it didn't work well and is no longer maintained.
IE 10 supports a previous version of flexboxand requires vendor prefixes. Be aware that certain properties from the current spec aren't supported in IE10 (such as
flex-grow,flex-shrinkandflex-basis). See the Flexbox 2012 Property Index.IE 11 is good, but buggy. It's based on the current flexbox standard. See the KNOWN ISSUEStab on this pagefor some of the problems. Also see: flex property not working in IE
With Chrome, Firefox and Edge you're good all around. You'll find minor bugs and inconsistencies but there are usually easy fixes. You'll need to be aware of Implied Minimum Flex Sizing, which sometimes causes sizing and scrollbar problems.
Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require
-webkit-prefixes. Sometimesmin-widthandmax-widthcause alignment problems which can be resolved withflexequivalents. See Flex items not stacking properly in Safari
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 项目未正确堆叠
For a complete review of flexbox browser support, see this page: http://caniuse.com/#search=flex
有关 flexbox 浏览器支持的完整评论，请参阅此页面：http://caniuse.com/#search=flex
For a quick way to add many (but not necessarily all) vendor prefixes use Autoprefixer. For Safari, see this articlefor -webkit-prefixes that some prefix generators don't include.
要快速添加许多（但不一定是全部）供应商前缀，请使用Autoprefixer。对于 Safari，请参阅本文以-webkit-了解某些前缀生成器不包含的前缀。
For a list of common flex bugs and their workarounds see Flexbugs.
有关常见 flex 错误及其解决方法的列表，请参阅Flexbugs。
Also, on this site, there's:
另外，在这个网站上，有：
回答by saravana va
It works for me display: -webkit-inline-box;in safari.
它适用于我显示：-webkit-inline-box; 在野生动物园。
