web-dev-qa-db-fra.com

display: flex ne fonctionne pas sur Internet Explorer

Mon conteneur flex:

.back_pattern {
    display: flex;
    display: -ms-flexbox;
    -ms-flex-pack: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

Sur d'autres navigateurs, tout fonctionne.
ie11: http://take.ms/68dHo ;
chrome: http://take.ms/JhcEH
Quel problème?

htmlcssflexbox
6
Oleg Verichko

Internet Explorer ne prend pas totalement en charge Flexbox pour les raisons suivantes:

Le support partiel est dû à la grande quantité de bogues présents (voir Problèmes connus de ).

 enter image description here Captures d'écran et infos tirées de caniuse.com

Problèmes connus:

  • IE 11 nécessite l'ajout d'une unité au troisième argument, la propriété flex-based voir la documentation MSFT.
  • Dans IE10 et IE11, les conteneurs avec display: flex et flex-direction: column ne calculeront pas correctement la taille de leurs enfants flexibles si le conteneur a min-height mais pas de propriété explicite height. Voir bug .
  • Dans IE10, la valeur par défaut de flex est 0 0 auto plutôt que 0 1 auto, comme défini dans la dernière spécification.
  • IE 11 n'aligne pas correctement les éléments verticalement lorsque min-height est utilisé. Voir bug .

Solutions de contournement

Flexbugs est une liste organisée par la communauté de problèmes Flexbox et de solutions de contournement inter-navigateurs. Voici une liste de tous les bogues pour lesquels une solution de contournement est disponible et des navigateurs qui l’affectent.

  1. La taille minimale du contenu des éléments flexibles n'est pas respectée
  2. Les éléments flex de colonne définis sur align-items: center débordent de leur conteneur
  3. min-height sur un conteneur flexible ne s'appliquera pas à ses éléments flexibles
  4. Les déclarations abrégées flex avec des valeurs flex-basis sans unité sont ignorées
  5. Les éléments de colonne flex ne préservent pas toujours les rapports de format intrinsèques
  6. La valeur de flex par défaut a changé
  7. flex-basis NE COMPTE PAS POUR box-sizing: border-box
  8. flex-basis NE SUPPORTE PAS calc()
  9. Certains éléments HTML ne peuvent pas être des conteneurs flex
  10. align-items: baseline ne fonctionne pas avec les conteneurs flex imbriqués
  11. Les déclarations de taille minimale et maximale sont ignorées lors de l'enveloppement d'éléments flexibles
  12. Les éléments en ligne ne sont pas traités comme des éléments flexibles
  13. L'importance est ignorée sur une base flexible lorsque vous utilisez un raccourci flexible
  14. Les conteneurs rétractables avec flex-flow: column wrap ne contiennent pas leurs éléments
  15. Les éléments de colonne flexibles ignorent margin: auto sur l'axe transversal
  16. flex-basis ne peut pas être animé
  17. Les éléments Flex ne sont pas correctement justifiés lorsque max-width est utilisé
32
Paolo Forgia

Je crains que cette question n'ait été répondue à quelques reprises, veuillez regarder ce qui suit si elle est liée 

1
adeguk Loggcity