web-dev-qa-db-fra.com

propriété flex ne travaillant pas IE

Je n'ai pas pu déterminer pourquoi la flexbox ne fonctionne pas dans IE 11.

Pour les tests, j'ai utilisé une disposition très simple de flexbox auprès de CodePen et collé les informations ci-dessous.

Chrome fonctionne comme prévu. IE11 échoue.

Image de la mise en page réussie sur Chrome:

 enter image description here

Image d'échec de la mise en page sur IE11

 enter image description here 

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

htmlcsscss3flexboxinternet-explorer-11
17
Dizz

IE rencontre un problème pour analyser la propriété flex.

Voici quelques solutions de contournement qui ont fonctionné pour moi:

  • Utilisez les propriétés de la main longue au lieu de la sténographie.

    Au lieu de quelque chose comme ceci: flex: 0 0 35%.

    Essaye ça:

    • flex-grow: 0
    • flex-shrink: 0
    • flex-basis: 35%

  • Attention avec les valeurs en pourcentage et sans unité avec flex-basis

    Cela peut dépendre de votre version de IE11. Le comportement semble varier.

    Essayez ces variations:

    • flex: 1 1 0
    • flex: 1 1 0px
    • flex: 1 1 0%

Il faut se méfier! Certains minificateurs CSS remplaceront 0px par 0, ce qui peut être très ennuyeux à déboguer (cependant, ils ne changeront pas 0% pour une raison quelconque).

Plus de détails ici:

  • Au lieu de flex: 1, utilisez flex: auto (ou ajoutez flex-basis: auto)

    Si vous utilisez flex: 1 dans flex-direction: row (comme sur des écrans plus grands) et que vous passez à flex-direction: column dans une requête multimédia (par exemple, pour les appareils mobiles), vous constaterez peut-être que vos éléments flexibles se réduisent.

    Dans votre requête multimédia, ajoutez flex-basis: auto. Cela remplacera la valeur flex-basis dans la règle flex: 1 (qui est généralement 0, 0px ou 0%, en fonction du navigateur). 

    Utiliser flex: auto devrait aussi fonctionner, ce qui est court pour:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto
  • Utilisez les propriétés width/height à l'ancienne au lieu de flex.

  • Utilisez la disposition block au lieu de la disposition flex.

    Vous n'avez pas besoin d'abandonner complètement la mise en page flexible. Mais pour un conteneur particulier, vous pourrez peut-être exécuter le travail avec display: block au lieu de display: flex; flex-direction: column.

    Par exemple, pour utiliser l’astuce padding afin d’intégrer de manière réactive une vidéo dans un élément flex, l’obstacle que j’étais confronté était que certains navigateurs ne fonctionnent pas bien avec un pourcentage de remplissage (ou de marge) dans un conteneur flex .

    Pour que cela fonctionne, j'ai remplacé la valeur display de l'élément flex par ceci:

    /* a flex item, also a nested flex container */
#footer-container > article {
    display: flex;
    flex-direction: column;
}

    pour ça:

    #footer-container > article {
    display: block;
}
33
Michael_B

Pour moi, en utilisant 

  flex: 1 1 auto;

au lieu de

  flex: 1;

a résolu le problème de flexion sur IE 11.

6
Embedded_Mugs

Dans mon cas, le minificateur CSS rejette l'unité px du dernier argument de la règle abrégée -ms-flex, j'ai essayé d'utiliser l'unité % et tout fonctionne correctement.

0
Raa Vijay

Comme dans la réponse @Michael_B, limitez la croissance avec la propriété _flex de Flexbox: flex: 0 1 (1/n - b) pris en valeur%, où n est le nombre d'éléments flexibles dans une ligne et b est l'écart entre les éléments flexibles dans IE.

Sur les éléments flex avec la propriété flex ci-dessus, utilisez la propriété max-width avec une valeur en pourcentage de 1/n - b.

Dans votre cas, le CSS généralisé pour l'élément flex serait:

li {
    // ... the remaining code from your snippet
    // Calculate the following manually and insert or use CSS preprocessor that does math for you.
    // See the formula explanation above.
    max-width: (your flex container max-width / 2) * 100% - b; 
    flex: 0 1 (your flex container max-width / 2) * 100% - b;
}

Dans le cas réel avec 5 éléments/ligne, il y aura (1/5) * 100% - 1% = 19% => max-width: 19% et flex: 0 1 19%;.

Jouez avec le paramètre b pour rendre les éléments flex suffisamment courts pour permettre à flex: wrap; de fonctionner.

0
bob-12345

Il suffit d'utiliser flex:1 0 auto;. Ça va marcher.

0
akshay kanyan