css flexbox wrap property doesn't work on ios6

问题

I am working on my project now, so I decided to use flexbox instead of float. It works fine for me, but I've found that display:flex doesn't work on the old iphone (ios 6.1). So I've added

display: -webkit-box;

Flex property works now, but all items are arranged in a row. I've created a simple fiddle, to show the problem. Also I've made two screenshots, to show how it works on PC and on iPhone.

PC:

iPhone:

As you see -webkit-flex-wrap: wrap doesn't work.

Does anybody know how to solve this problem?? I hope for your help.

回答1:

Support for the current flexbox specification in iOS doesn't begin until iOS 7.0.

iOS 3.2 - 6.1 support the old flexbox specification and do not support wrapping.

See browser support data here: http://caniuse.com/#search=flexbox

回答2:

See the flex-direction property for info on how to align the flex items (row or column).

.wrapper {
    flex-direction: column;
    ...
}

Also, on your flex items, you have (width: 500px;) try the flex property:

.wrapper > div {
   flex: 0 0 500px;
   ...
}

来源：https://stackoverflow.com/questions/33197129/css-flexbox-wrap-property-doesnt-work-on-ios6