आईफोन 6 फ्लेक्सबॉक्स रैपिंग अंक

Question

मुझे फ्लेक्सबॉक्स का उपयोग करने का आनंद मिलता है लेकिन किसी कारण से मैं किसी भी आईओएस डिवाइस पर काम करने के लिए लपेट नहीं पा रहा हूं। लपेटने के लिए कोई आसान फॉलबैक है? यहाँ एक मुद्दा जहां आइटम सिर्फ लपेट नहीं होगा: (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>

सबसे सरल तरीका है यही कारण है कि। मैं तो सब कुछ करने के लिए उपसर्ग की एक टन जोड़ने के लिए है कि अगर मदद की देखने के लिए कोशिश की, लेकिन उसने ऐसा नहीं किया:

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; 

flexbox नहीं उपयोग करता है, तो मैं चाहता हूँ चीजों को सही ढंग से आईफोन पर रैप करने के लिए का एकमात्र समाधान है?

Answer 1

इस मुद्दे का मूल सभी ब्राउज़रों के माध्यम से आईफोन 5 और 6 में लगातार था। अंत में इसे प्रतिशत चौड़ाई निर्धारित करने के साथ करना पड़ा। एक बार मैंने हटा दिया कि सबकुछ ढेर होना चाहिए। मैं /u/andrei-gheorghiu को धन्यवाद देना चाहता हूं क्योंकि उनके जेएसफ़िडल्स (हटाए गए उत्तर में) ने मुझे सही दिशा में इंगित किया है।

#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

मैं फ्लेक्स आइटम display: inline-block;

Answer 3

iPhone 6s flex-direction टैग का समर्थन नहीं दे रही है इस समस्या का समाधान। मैंने इसे flex-wrap के साथ बदलकर समस्या हल की।

ओल्ड: flex-direction: column-reverse

न्यू: flex-wrap: wrap-reverse

यह काम)