iPhone 6 Flexbox Wrapping Numero

Mi piace usare la flexbox ma per qualche motivo non riesco a ottenere il wrapping per funzionare su qualsiasi dispositivo iOS. C'è un semplice ripiego per il wrapping? Ecco un problema in cui gli elementi semplicemente non avvolgere: (JSFiddle Fans)iPhone 6 Flexbox Wrapping Numero

#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>

Questo è l'approccio più semplice. Allora ho provato ad aggiungere un tonnellata di prefissi per tutto per vedere se questo ha aiutato, ma non lo feci:

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'unica soluzione per non uso FlexBox se voglio le cose per avvolgere correttamente su iPhone?

fonte

2016-02-18 Howdy_McGee

@Paulie_D Questo è un peccato, quindi non c'è nessun vero work-around per questo? Stai lontano dalla flexbox finché IOS <= 6 non viene eliminato? Ho cercato online forse una sostituzione JS ma non ho trovato nulla di sostanziale. –

@Paulie_D iphone 6 Suppongo che rientri in quella categoria, giusto? –

Suppongo di aver pensato che l'iPhone 6 fosse in esecuzione su iOS 6. Il problema principale è l'iPhone, che dovrebbe avere almeno iOS 8, giusto? Scusa per la confusione, non so come faccia la mela. –

Il nocciolo del problema era persistente in iPhone 5 e 6 attraverso tutti i browser. Alla fine si trattava di impostare una larghezza percentuale. Una volta ho rimosso tutto impilato come dovrebbe. Voglio ringraziare lo /u/andrei-gheorghiu come il suo JSFiddles (in una risposta cancellata) mi ha indicato nella giusta direzione.

#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>

fonte

2016-02-18 20:20:51

Utilizzerebbe 'width: calc (100%/3);' funziona invece di una percentuale diritta? – user500665

@ user500665 Non l'ho provato ma non riesco a pensare a un motivo per cui non funzionerebbe tranne * forse * supporto browser. –

-3

Ho risolto questo problema dando gli elementi di flessione display: inline-block;

fonte

2016-11-21 14:39:31 zeexia

Il problema riguardava il safari su iOS non sul desktop safari. Questo non risolve il problema detto "flex". – Cozzbie

iPhone 6s non sostenere flex-direction tag. Ho risolto il problema sostituendolo con flex-wrap.

Vecchio: flex-direction: column-reverse

Nuovo:! flex-wrap: wrap-reverse

E 'di lavoro)

fonte

2017-09-15 10:45:53

risposta

Problemi correlati