Flexbox e Internet Explorer 11 (display: flex in <html>?)

117

Ho intenzione di abbandonare i layout "fluttuanti" e utilizzare CSS flexbox per progetti futuri. Sono stato felicissimo di vedere che tutti i principali browser nelle loro versioni attuali sembrano supportare (in un modo o nell'altro) flexbox.

Sono andato su "Risolto da Flexbox" per vedere alcuni esempi. Tuttavia l'esempio "Sticky Footer" non sembra funzionare in Internet Explorer 11. Ho giocato un po 'e l'ho fatto funzionare aggiungendo display:flexa <html>e width:100%al<body>

Quindi la mia prima domanda è: qualcuno può spiegarmi questa logica? Ho solo armeggiato e ha funzionato, ma non capisco bene perché abbia funzionato in quel modo ...

Poi c'è l'esempio "Oggetto multimediale" che funziona in tutti i browser tranne - avete indovinato - Internet Explorer. Ho giocherellato anche con quello, ma senza alcun successo.

La mia seconda domanda quindi è: esiste una possibilità "pulita" di far funzionare l'esempio "Oggetto multimediale" in Internet Explorer?

— Kodekan
fonte

1

Solo un aggiornamento a questa vecchia domanda: la demo collegata funziona bene su IE11. Deve essere stato risolto un bug nei 3 anni da quando è stato chiesto.

— Daryl

151

Secondo http://caniuse.com/#feat=flexbox :

"I valori predefiniti di IE10 e IE11 per flexsono 0 0 autoanziché 0 1 auto, come da bozza delle specifiche, a partire da settembre 2013"

Quindi, in parole semplici, se da qualche parte nel tuo CSS hai qualcosa del genere:, flex:1che non è tradotto allo stesso modo in tutti i browser. Prova a cambiarlo in 1 0 0e credo che vedrai immediatamente che -kinda- funziona.

Il problema è che questa soluzione probabilmente rovinerà Firefox, ma poi puoi usare alcuni hack per prendere di mira solo Mozilla e cambiarlo di nuovo:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Poiché flexboxè un candidato W3C e non è ufficiale, i browser tendono a dare risultati diversi, ma immagino che cambierà nell'immediato futuro.

Se qualcuno ha una risposta migliore vorrei sapere!

— Odisseas
fonte

1

Penso che ciò significhi che IE10 ha bisogno -ms-flex: 1 0 0;e IE11 flex: 1 0 0;..?

— Eystein

19

Con Google Chrome 39 questo ha improvvisamente smesso di funzionare per me. Mi ci sono voluti anni per rintracciarlo, ma era la specifica della terza cifra. Chrome 39 non aderisce a flex: 1 0 0;. Ma flex: 1 0 0%;( nota la % ) o flex: 1 0 auto;funzionerà.

— Eystein

Sì, è vero, ha rotto anche alcuni dei miei progetti! L'ho risolto semplicemente cambiandolo in flex: 1;Immagino dipenda da cosa stai cercando, però ...

— Odisseas

1

Il problema principale con IE11 è il modo in cui calcola flex-basis. Github ha una buona discussione sul perché flex:1 0 100%funziona in alcuni casi per IE11 mentre flex: 1 0 0%o addirittura flex: 1 0 autofunziona in altri. Devi conoscere il contenuto in anticipo.

— P.Brian.Mackey

Tratto da caniuse.com/#feat=flexbox , tra i problemi noti viene menzionato specificamente che IE 11 richiede l'aggiunta di un'unità al terzo argomento, la proprietà flex-basis ..

— Henry Neo

49

Usa un altro contenitore flessibile per risolvere il min-heightproblema in IE10 e IE11:

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

Guarda una demo funzionante .

Non utilizzare il layout flexbox direttamente bodyperché rovina gli elementi inseriti tramite i plugin jQuery (completamento automatico, popup, ecc.).
Non utilizzare height:100%o height:100vhsul tuo contenitore perché il piè di pagina rimarrà nella parte inferiore della finestra e non si adatterà a contenuti lunghi.
Usa flex-grow:1piuttosto che flex:1causare i valori predefiniti di IE10 e IE11 per flexsono 0 0 autoe non 0 1 auto.

— Belig
fonte

3

Ho trovato ho dovuto aggiungere flex-direction: columnper .ie-fixMinHeightevitare effetti collaterali. Se non disponi di un codice HTML specifico per IE, puoi utilizzare.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

So che ha 2 anni, ma grazie! Stavo seguendo questo stackoverflow.com/a/24979148/359157 e ho combattuto all'infinito cercando di capire perché IE è stato rotto mentre Edge e Chrome funzionavano perfettamente. Il heightvs min-heightera la chiave.

— TyCobb

39

Hai solo bisogno flex:1; Risolverà il problema per IE11. Secondo Odisseas. Assegna inoltre il 100% di altezza a html, elementi del corpo .

Modifiche CSS:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

url funzionante: http://jsfiddle.net/3tpuryso/13/

— Ashok Kumar Gupta
fonte

Potresti spiegare di più su questo problema: Esiste una possibilità "pulita" di far funzionare l'esempio "Oggetto multimediale" in IE?

— Ashok Kumar Gupta

1

Questo funziona per me. Una cosa che ho scoperto (perché mi ha colto di sorpresa ) è che se hai un elemento contenitore, gli display: flex;stili associati devono essere applicati sia al bodycontenitore che a: jsfiddle.net/Skateside/nezdrrkr

— James Long

L'impostazione dell'altezza html al 100% sembra causare la maincessazione della crescita del contenuto di (almeno in Chrome); se aggiungi abbastanza contenuto, il piè di pagina verrà superato. jsfiddle.net/3tpuryso/65

— FoolishSeth,

@FoolishSeth come è adesso, in pratica gli stai dicendo di crescere fino al 100% e non un pixel in più. Dovresti invece impostare htmlsu min-height: 100%, per seguire il tuo contenuto

— Odisseas

Grazie! La parte che mancava per me non era in realtà nessuno degli attributi flex, ma l'altezza: 100% sull'elemento contenitore (che per me era un div .pusher perché il mio sito include una barra laterale reattiva).

— zanther

0

Ecco un esempio di utilizzo di flex che funziona anche in Internet Explorer 11 e Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

Espandi lo snippet

— BadTree Lu
fonte

15

Fornisci ulteriori informazioni, invece di incollare semplicemente il tuo Html.

— Peter il

7

Sebbene questa risposta sia probabilmente corretta e utile, è preferibile includere qualche spiegazione insieme ad essa per spiegare come aiuta a risolvere il problema. Ciò diventa particolarmente utile in futuro, se c'è un cambiamento (forse non correlato) che fa smettere di funzionare e gli utenti devono capire come funzionava una volta.

— Erty Seidohl

0

A volte è semplice come aggiungere: '-ms-' davanti allo stile Like -ms-flex-flow: row wrap; per farlo funzionare anche.

— Marsel Grey
fonte

3

A volte, ma la maggior parte delle volte no;)

— Scarichiamo