Html flexbox 在 iOS 上不起作用（订购）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27904072/
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 not working (ordering) on iOS
提问by user1406440
I have an <ul>which has several list-items all containing an image. The <ul>displays horizontally on wider screens but on mobile I display the list-item's 2 by 2. Originally I did this with float:left; width: 50%;set on the list-item's which worked great. But as the images are logos and all different sizes it didn't look right, so I decided to use flexbox to reorder the list-item's so the image's were arranged different and looked neater. My CSS is below:
我有一个<ul>，其中有几个列表项都包含一个图像。该<ul>显示器水平上更宽的屏幕，但是手机显示我的列表项通过2的2原来我这样做是对float:left; width: 50%;的列表项的这伟大的工作集。但是由于图像是徽标并且所有不同的尺寸看起来都不正确，所以我决定使用 flexbox 重新排序列表项，因此图像的排列方式不同并且看起来更整洁。我的 CSS 如下：
ul {
overflow: hidden;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21?28, Safari 6.1+ */
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
li {
display: block;
margin: 0 0 @baseline/2 0;
padding: 0;
text-align: center;
width: 50%;
}
li:nth-child(1) {order: 1;}
li:nth-child(2) {order: 2;}
li:nth-child(3) {order: 4;}
li:nth-child(4) {order: 3;}
li:nth-child(5) {order: 5;}
li:nth-child(6) {order: 6;}
li:nth-child(7) {order: 7;}
li:last-child {
clear: left;
float: none;
margin: 0 auto;
}
I did have float:left;on the list-item's but I gather flexbox doesn't need this if flex-flow: row wrapis set ...or at least it shouldn't?
我确实float:left;在列表项上有，但我认为 flexbox 不需要这个，如果flex-flow: row wrap设置了......或者至少它不应该？
The above CSS works fine on my iMac in Chrome, Firefox and Opera. In Safari though and on IOS (Safari) the items are not reordered.
上面的 CSS 在我的 iMac 上的 Chrome、Firefox 和 Opera 上运行良好。但在 Safari 和 IOS (Safari) 中，项目不会重新排序。
I thought this would work on latest browsers, especially webkit and iOS - can anyone shed some light on this?
我认为这适用于最新的浏览器，尤其是 webkit 和 iOS - 任何人都可以对此有所了解吗？
This is how the logos should display when working correctly...
这是徽标在正常工作时应显示的方式...
And this is how they display on Safari/iPhone - you can see the ordering is different (wrong - the order of the mark-up)...
这就是它们在 Safari/iPhone 上的显示方式 - 您可以看到顺序不同（错误 - 标记的顺序）......
Thanks, look forward to your response!
谢谢，期待您的回复！
回答by Natsu
It's not working because you're missing the -webkitprefix on order, which is still required in all versions of Safari & iOS Safari that support flexbox. In regard to prefixes for other browsers, take a look a the support chart for flexbox on caniuse.
它不起作用，因为您缺少 上的-webkit前缀order，在支持 flexbox 的所有 Safari 和 iOS Safari 版本中仍然需要前缀。关于其他浏览器的前缀，请查看 caniuse 上flexbox的支持图表。
Update your code to:
将您的代码更新为：
li:nth-child(1) {order: 1; -webkit-order: 1;}
li:nth-child(2) {order: 2; -webkit-order: 2;}
li:nth-child(3) {order: 4; -webkit-order: 4;}
li:nth-child(4) {order: 3; -webkit-order: 3;}
li:nth-child(5) {order: 5; -webkit-order: 5;}
li:nth-child(6) {order: 6; -webkit-order: 6;}
li:nth-child(7) {order: 7; -webkit-order: 7;}
