Vấn đề gói sản phẩm iPhone 6 Flexbox

Question

Tôi thích sử dụng flexbox nhưng vì một lý do nào đó tôi không thể kết nối với bất kỳ thiết bị iOS nào. Có một dự phòng dễ dàng cho gói? Dưới đây là một vấn đề mà các mặt hàng chỉ sẽ không quấn: (JSFiddle Fans)

#flex   {display: flex; flex-flow: row wrap;} 
 
#flex .item  {width:33.33%; min-width: 500px; min-height: 300px;} 
 
#flex .one  {background: blue;} 
 
#flex .two  {background: green;} 
 
#flex .three  {background: red;}

<div id="flex"> 
 
    <div class="item one"></div> 
 
    <div class="item two"></div> 
 
    <div class="item three"></div> 
 
</div>

Đó là cách tiếp cận đơn giản nhất. sau đó tôi cố gắng thêm một tấn các tiền tố để tất cả mọi thứ để xem có giúp nhưng nó không:

display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
-webkit-flex: 0 1 auto; 
-webkit-flex-flow: row wrap; 
    -ms-flex-flow: row wrap; 
     flex-flow: row wrap; 
flex-wrap: wrap; 
-webkit-flex-wrap: wrap; 

là giải pháp duy nhất để không sử dụng flexbox nếu tôi muốn điều cần quấn một cách chính xác trên iphones?

Answer 1

Cốt lõi của sự cố liên tục xảy ra trong iPhone 5 và 6 thông qua tất cả các trình duyệt. Cuối cùng nó đã làm với thiết lập một chiều rộng phần trăm. Khi tôi đã xóa mọi thứ được xếp chồng lên nhau. Tôi muốn cảm ơn /u/andrei-gheorghiu như JSFiddles của mình (trong một câu trả lời đã bị xóa) chỉ cho tôi đi đúng hướng.

#flex   { 
 
     display: -webkit-box; 
 
display: -webkit-flex; 
 
display: -ms-flexbox; 
 
display: flex; 
 
-webkit-box-orient: horizontal; 
 
-webkit-box-direction: normal; 
 
-webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
     flex-direction: row; 
 
-webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
} 
 
#flex .item  {min-width: 200px; min-height: 300px;} 
 
#flex .one  {background: blue;} 
 
#flex .two  {background: green;} 
 
#flex .three  {background: red;}

<div id="flex"> 
 
    <div class="item one"></div> 
 
    <div class="item two"></div> 
 
    <div class="item three"></div> 
 
</div>

Answer 2

tôi giải quyết vấn đề này bằng cách đưa ra các mục flex display: inline-block;

Answer 3

iPhone 6s không hỗ trợ flex-direction thẻ. Tôi đã giải quyết được sự cố bằng cách thay thế bằng flex-wrap.

Cũ: flex-direction: column-reverse

mới: flex-wrap: wrap-reverse

Nó làm việc)