flexbox 在 iOS 上不工作(排序)
flexbox not working (ordering) on iOS
我有一个 <ul>
,其中有几个 list-items 都包含一个图像。 <ul>
在较宽的屏幕上水平显示,但在移动设备上我显示 list-item 的 2 x 2。最初我是通过在 list-item 上设置 float:left; width: 50%;
来做到这一点的伟大的。但是由于图像是徽标并且所有不同的尺寸看起来都不对,所以我决定使用 flexbox 重新排序 list-item,这样图像的排列就不同了,看起来更整洁了。我的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;
}
我确实在 list-item 上设置了 float:left;
,但我认为如果设置了 flex-flow: row wrap
,则 flexbox 不需要这个……或者至少不需要?
以上 CSS 在我的 Chrome、Firefox 和 Opera 中的 iMac 上运行良好。但在 Safari 和 IOS (Safari) 中,项目不会重新排序。
我认为这适用于最新的浏览器,尤其是 webkit 和 iOS - 任何人都可以阐明这一点吗?
这是徽标在正常工作时的显示方式...
这就是它们在 Safari/iPhone 上的显示方式 - 您可以看到顺序不同(错误 - mark-up 的顺序)...
谢谢,期待您的回复!
它不起作用,因为您在 order
上缺少 -webkit
前缀,这在支持 flexbox 的所有版本的 Safari 和 iOS Safari 中仍然是必需的。关于其他浏览器的前缀,请查看 caniuse.
上 flexbox 的支持图表
将您的代码更新为:
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;}
我有一个 <ul>
,其中有几个 list-items 都包含一个图像。 <ul>
在较宽的屏幕上水平显示,但在移动设备上我显示 list-item 的 2 x 2。最初我是通过在 list-item 上设置 float:left; width: 50%;
来做到这一点的伟大的。但是由于图像是徽标并且所有不同的尺寸看起来都不对,所以我决定使用 flexbox 重新排序 list-item,这样图像的排列就不同了,看起来更整洁了。我的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;
}
我确实在 list-item 上设置了 float:left;
,但我认为如果设置了 flex-flow: row wrap
,则 flexbox 不需要这个……或者至少不需要?
以上 CSS 在我的 Chrome、Firefox 和 Opera 中的 iMac 上运行良好。但在 Safari 和 IOS (Safari) 中,项目不会重新排序。
我认为这适用于最新的浏览器,尤其是 webkit 和 iOS - 任何人都可以阐明这一点吗?
这是徽标在正常工作时的显示方式...
这就是它们在 Safari/iPhone 上的显示方式 - 您可以看到顺序不同(错误 - mark-up 的顺序)...
谢谢,期待您的回复!
它不起作用,因为您在 order
上缺少 -webkit
前缀,这在支持 flexbox 的所有版本的 Safari 和 iOS Safari 中仍然是必需的。关于其他浏览器的前缀,请查看 caniuse.
将您的代码更新为:
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;}