flex-Eigenschaft funktioniert nicht in IE

Ich nicht in der Lage gewesen, um festzustellen, warum flexbox funktioniert nicht im IE 11.

Zum testen, ich bezogen eine sehr einfache flexbox-layout von CodePen und eingefügt haben die unten stehenden Informationen.

Chrome funktioniert wie vorgesehen; IE11 versagt.

Bild von layout-Erfolg in Chrome ausgeführt:

flex-Eigenschaft funktioniert nicht in IE

Bild von layout-Fehler auf IE11

flex-Eigenschaft funktioniert nicht in IE

CSS:

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;
}

HTML:

<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

InformationsquelleAutor Dizz | 2015-08-27
  1. 39

    IE hat ein problem Parsen der flex Eigenschaft.

    Hier sind ein paar workarounds, die bei mir funktioniert:

    • Nutzung der lange-hand-Immobilien statt der Kürzel.

      Sondern so etwas wie dieses: flex: 0 0 35%.

      Versuchen Sie dies:

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

    • Vorsichtig mit Prozentsatz und unitless Werte mit flex-basis

      Diese können abhängig von Ihrer version von IE11. Verhalten scheint zu variieren.

      Versuchen, diese Variationen:

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

    Vorsicht! Bestimmte css-minifiers ersetzen 0px mit 0, das kann eine wirklich lästige Sache zu Debuggen (Sie jedoch nicht verändern 0% für einige Grund).

    Mehr details hier:

    • Statt flex: 1 verwenden flex: auto (oder fügen Sie in flex-basis: auto)

      Wenn Sie flex: 1 im flex-direction: row (wie auf größeren Bildschirmen), und wechseln Sie zu flex-direction: column in einer media query (sagen wir mal für mobile Geräte), können Sie feststellen, dass die flex-items reduzieren.

      In Ihre Medien-Abfrage, fügen Sie flex-basis: auto. Dies überschreibt die flex-basis Wert in der flex: 1 Regel (die in der Regel 0, 0px oder 0% je nach browser).

      Mit flex: auto sollte auch, was die Abkürzung für:

      • flex-grow: 1
      • flex-shrink: 1
      • flex-basis: auto
    • Nutzung Alter-Mode width /height Eigenschaften statt flex.

    • Verwenden block layout statt flex layout.

      Müssen Sie nicht völlig aufgeben flex-layout. Aber für einen bestimmten container können Sie in der Lage sein, um den job zu erledigen mit display: block statt display: flex; flex-direction: column.

      Beispielsweise in benötigen, um verwenden Sie die Polsterung trick, um effizient einbetten eines Videos in einem flex-Element, das Hindernis, die ich konfrontiert wurde, war, dass einige Browser nicht gut mit Prozentsatz Polsterung (oder Marge) in einem flex-container.

      Damit es funktioniert, wechselte ich das display Wert auf die flex-Element aus dieser:

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

      zu diesem:

      #footer-container > article {
    display: block;
}
    • Vielen Dank..... Lebensretter!
    • Diese Antwort ist gold! 😀 Danke.
    • Mahn ! Diese Antwort verdient standing Ovations
    InformationsquelleAutor Michael_B
  2. 7

    Für mich, mit 

      flex: 1 1 auto;

    statt

      flex: 1;

    löste das flex-Problem auf IE 11.

    • Gut, das ist das, was Statt flex: 1 verwenden flex: auto bedeutet, als flex: auto übersetzt genau, dass flex: 1 1 auto
    InformationsquelleAutor Embedded_Mugs
  3. 0

    Verwenden Sie einfach flex:1 0 auto;. Wird es funktionieren.

    InformationsquelleAutor akshay kanyan
  4. 0

    Als in @Michael_B Antwort, begrenzen das Wachstum mit Flexbox flex Eigenschaft: flex: 0 1 (1/n - b) genommen in % Wert, wo n ist die Anzahl der flex-Elemente in einer Zeile und b ist die Lücke, die Sie sehen wollen zwischen flex-Elemente im IE.

    Auf der flex-Elemente zusammen mit flex Eigenschaft über die Verwendung der max-width Eigenschaft mit dem Prozentwert 1/n - b.

    In Ihrem Fall die Allgemeine CSS-Datei für das flex-Element wäre:

    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;
}

    Im konkreten Fall mit den 5-Elemente /Zeile gibt es (1/5) * 100% - 1% = 19% => max-width: 19% und flex: 0 1 19%;.

    Spielen mit b parameter, um flex-Elemente kurz genug, um flex: wrap; Arbeit.

    InformationsquelleAutor bob-12345
  5. 0

    In meinem Fall, die CSS minifier lehnt die px Einheit das Letzte argument in -ms-flex Kurzschrift-Regel habe ich versucht, mit % Gerät und es funktioniert einwandfrei.

    InformationsquelleAutor Raa Vijay
Schreibe einen Kommentar