differenze del browser (Firefox vs Chrome) quando si utilizza flex-direzione, flex-flow

ho notato una differenza interessante tra Firefox e Chrome nel seguente schema FlexBox:differenze del browser (Firefox vs Chrome) quando si utilizza flex-direzione, flex-flow

html, 
 
body { 
 
    height: 100%; 
 
    min-height: 100%; 
 
    margin: 0px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    border: 1px solid #D3D3D3; 
 
    flex: 0 1 auto; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1 0 auto; 
 
    flex-wrap: wrap; 
 
} 
 
.tab1 { 
 
    flex: 1 0 48%; 
 
    position: relative; 
 
    margin: 0.5em; 
 
    background-color: orange; 
 
} 
 
.tab2 { 
 
    flex: 1 0 48%; 
 
    position: relative; 
 
    margin: 0.5em; 
 
    background-color: blue; 
 
} 
 
.tab3 { 
 
    flex: 1 0 48%; 
 
    position: relative; 
 
    margin: 0.5em; 
 
    border: 1px solid lightgray; 
 
    background-color: green; 
 
} 
 
.tab4 { 
 
    flex: 1 0 48%; 
 
    position: relative; 
 
    margin: 0.5em; 
 
    border: 1px solid lightgray; 
 
    background-color: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    </header> 
 
    <div class="row"> 
 
    <div class="tab1"></div> 
 
    <div class="tab2"></div> 
 
    <div class="tab3"></div> 
 
    <div class="tab4"></div> 
 
    </div> 
 
</body> 
 

 
</html>

Quando eseguo questo in Chrome 43, ottengo rettangoli orizzontali. Tuttavia, in Firefox 39 ciò comporta rettangoli verticali. La parte importante è l'uso di flex-direction: column; e flex-wrap: wrap; nell'elemento con classe .row.

Per ottenere un layout simile, aggiungere height: 100%; dà rettangoli verticali in Chrome. Tuttavia, questo crea una barra di scorrimento in entrambi i browser a causa dell'elemento di intestazione (vuoto). Qualcuno sa qual è la ragione di questa differenza nel layout e qual è il modo migliore per risolverlo?

UPDATE:

A proposito, io sono interessato a capire il motivo per cui v'è una differenza di Chrome e Firefox, non tanto per ottenere un layout con rettangoli verticali. Forse c'è qualcosa di buggato nell'uso di flex-direction: column o forse sto facendo qualcosa di sbagliato. In ogni caso, sarebbe utile saperlo.

fonte

2015-07-21 Robert Smith

Aggiunto un aggiornamento alla mia risposta – DCdaz

C'è un bug in Flex che provoca strano comportamento quando non si definisce width's e height's anche min-height è noto per causare un sacco di problemi di.

Here is a repo di alcuni problemi noti e come risolverli.

nota

Side I beleive Safarai richiede -webkit- prefisso fornitore per flex regole

Ecco scatola verticale una possibile soluzione di dare in entrambe le FF e Chrome

html, 
 
body { 
 
    height:100%; 
 
    width:100%; 
 
    margin: 0px; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
header { 
 
    border: 1px solid #D3D3D3; 
 
    flex: 0 1 auto; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 1 0 auto; 
 
    flex-wrap: wrap; 
 
} 
 
.tab1 { 
 
    flex: 1 0 20%; 
 
    position: relative; 
 
    margin: 0.5em; 
 
    background-color: orange; 
 
} 
 
.tab2 { 
 
    flex: 1 0 20%; 
 
    position: relative; 
 
    margin: 0.5em; 
 
    background-color: blue; 
 
} 
 
.tab3 { 
 
    flex: 1 0 20%; 
 
    position: relative; 
 
    margin: 0.5em; 
 
    border: 1px solid lightgray; 
 
    background-color: green; 
 
} 
 
.tab4 { 
 
    flex: 1 0 20%; 
 
    position: relative; 
 
    margin: 0.5em; 
 
    border: 1px solid lightgray; 
 
    background-color: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    </header> 
 
    <div class="row"> 
 
    <div class="tab1"></div> 
 
    <div class="tab2"></div> 
 
    <div class="tab3"></div> 
 
    <div class="tab4"></div> 
 
    </div> 
 
</body> 
 

 
</html>

fonte

2015-07-21 22:33:45 DCdaz

Solo per vostra informazione, questo dovrebbe essere un commento in questo momento - quando trovi le risorse e le scrivi, allora converti in una risposta :-) –

Sarebbe fantastico. Grazie. Ho letto alcuni bug in Firefox usando 'flex-flow', ma in questo caso, Chrome sembra produrre un comportamento scorretto. A proposito, mi aspettavo che l'altezza iniziale degli stili: 100%; altezza minima: 100%; potrebbe essere la causa di alcuni problemi. –

Ciao Rob Ho aggiunto il repository per alcuni problemi noti che non ho trovato uno che corrisponda al tuo caso esatto, così male da scioglierti con il tuo codice e aggiornarlo. – DCdaz

differenze del browser (Firefox vs Chrome) quando si utilizza flex-direzione, flex-flow

risposta

Problemi correlati