web-dev-qa-db-fra.com

Flexbox et Internet Explorer 11 (affichage: flex en <html>?)

Je prévois m'éloigner des mises en page "flottantes" et utiliser CSS flexbox pour les projets futurs. J'ai été ravi de constater que tous les principaux navigateurs de leur version actuelle semblent prendre en charge (d'une manière ou d'une autre) la flexbox.

Je me suis dirigé vers "résolu par Flexbox" pour regarder quelques exemples. Cependant, l'exemple "Sticky Footer" ne semble pas fonctionner dans Internet Explorer 11. J'ai joué un peu et je l'ai obtenu en ajoutant display:flex au <html> et width:100% au <body>

Ma première question est donc la suivante: quelqu'un peut-il m'expliquer cette logique? Je me suis contenté de tripoter et cela a fonctionné, mais je ne comprends pas très bien pourquoi cela a fonctionné de cette façon ...

Ensuite, il y a l'exemple "Media Object" qui fonctionne dans tous les navigateurs sauf pour - vous l'avez deviné - Internet Explorer. Je me suis amusé avec ça aussi, mais sans succès.

Ma deuxième question est donc la suivante: existe-t-il une possibilité "propre" de faire fonctionner l’exemple "Objet multimédia" dans Internet Explorer?

htmlcssflexboxcross-browser
98
Kodekan

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

"Les valeurs par défaut d'IE10 et IE11 pour flex sont 0 0 auto plutôt que 0 1 auto, conformément au projet de spécification, à compter de septembre 2013"

Donc, en termes simples, si quelque part dans votre CSS, vous avez quelque chose comme ceci: flex:1, cela ne se traduit pas de la même manière dans tous les navigateurs. Essayez de le changer en 1 0 0 et je pense que vous verrez immédiatement que cela -kinda- fonctionne.

Le problème est que cette solution va probablement gâcher firefox, mais vous pouvez ensuite utiliser quelques hacks pour cibler uniquement Mozilla et le rétablir:

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

Puisque flexbox est un candidat au W3C et n'est pas officiel, les navigateurs ont tendance à donner des résultats différents, mais je suppose que cela changera dans un avenir immédiat.

Si quelqu'un a une meilleure réponse, j'aimerais savoir!

139
Odisseas

Utilisez un autre conteneur flex pour résoudre le problème min-height dans IE10 et 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;
}

Voir un démo de travail .

  • N'utilisez pas la mise en page flexbox directement sur body, car elle aurait endommagé les éléments insérés via les plugins jQuery (saisie semi-automatique, popup, etc.).
  • N'utilisez pas height:100% ou height:100vh sur votre conteneur car le pied de page va rester en bas de la fenêtre et ne s'adaptera pas à un contenu long.
  • Utilisez flex-grow:1 plutôt que flex:1, car les valeurs par défaut d'IE10 et IE11 pour flex sont 0 0 auto et non 0 1 auto.
44
BeliG

Vous avez juste besoin de flex:1; Cela corrigera le problème pour IE11. Je seconde Odisseas. Attribuez en outre 100% de la hauteur au html, éléments du corps .

Changements 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 de travail: http://jsfiddle.net/3tpuryso/13/

34
Ashok Kumar Gupta

Voici un exemple d'utilisation de flex qui fonctionne également dans Internet Explorer 11 et 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>
0
BadTree Lu

Parfois, c'est aussi simple que d'ajouter: '-ms-' devant le style Like -ms-flex-flow: row wrap; pour le faire fonctionner aussi.

0
Marsel Gray