webentwicklung-frage-antwort-db.com.de

flex-Eigenschaft, die nicht funktioniert IE

Ich konnte nicht feststellen, warum Flexbox in IE 11 nicht funktioniert.

Zum Testen habe ich ein sehr einfaches Flexbox-Layout von CodePen bezogen und die Informationen unten eingefügt.

Chrome funktioniert wie vorgesehen; IE11 schlägt fehl.

Abbildung des Layouterfolgs unter Chrome:

 enter image description here

Bild des Layoutfehlers auf 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 hat ein Problem beim Parsen der Eigenschaft flex.

Hier sind einige Problemumgehungen, die für mich funktioniert haben:

  • Verwenden Sie die Langzeiteigenschaften anstelle der Kurzschrift.

    Anstelle von so etwas: flex: 0 0 35%.

    Versuche dies:

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

  • Vorsicht bei Prozentwerten und Werten ohne Einheit mit flex-basis

    Dies hängt möglicherweise von Ihrer Version von IE11 ab. Das Verhalten scheint zu variieren.

    Probieren Sie diese Variationen aus:

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

Vorsicht! Bestimmte CSS-Minis werden 0px Durch 0 Ersetzen, was (allerdings) sehr ärgerlich sein kann , sie werden 0% aus irgendeinem Grund nicht ändern).

Weitere Details hier:

  • Verwenden Sie anstelle von flex: 1flex: auto (Oder fügen Sie flex-basis: auto Hinzu)

    Wenn Sie flex: 1 In flex-direction: row Verwenden (z. B. auf größeren Bildschirmen) und in einer Medienabfrage zu flex-direction: column Wechseln (z. B. für Mobilgeräte), ist dies möglich Finden Sie heraus, dass Ihre flexiblen Elemente zusammenbrechen.

    Fügen Sie Ihrer Medienabfrage flex-basis: auto Hinzu. Dies überschreibt den Wert flex-basis In der Regel flex: 1 (Normalerweise 0, 0px Oder 0%, Je nach Browser). .

    Die Verwendung von flex: auto Sollte ebenfalls funktionieren, was kurz ist für:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto
  • Verwenden Sie die altmodischen Eigenschaften width/height anstelle von flex.

  • Verwenden Sie block Layout anstelle von flex Layout.

    Sie müssen das Flex-Layout nicht vollständig aufgeben. Für einen bestimmten Container können Sie die Aufgabe jedoch möglicherweise mit display: block Anstelle von display: flex; flex-direction: column Erledigen.

    Als ich zum Beispiel den Auffülltrick verwenden musste, um ein Video reaktionsschnell in ein flexibles Element einzubetten, stand ich vor dem Problem, dass einige Browser mit Prozentauffüllung (oder Rand) nicht gut funktionieren ) in einem flexiblen Behälter .

    Damit es funktioniert, habe ich den Wert display für das Flex-Element folgendermaßen geändert:

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

    dazu:

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

Für mich mit 

  flex: 1 1 auto;

anstatt

  flex: 1;

das Flex-Problem auf IE 11 wurde behoben.

6
Embedded_Mugs

In meinem Fall lehnt der CSS-Minifier die px-Einheit des letzten Arguments in der -ms-flex-Kürzelregel ab. Ich habe versucht, %-Einheit zu verwenden, und es funktioniert einwandfrei.

0
Raa Vijay

Begrenzen Sie wie in der @Michael_B-Antwort das Wachstum mit der Flexbox-Eigenschaft flex: flex: 0 1 (1/n - b) in% value, wobei n die Anzahl der Flex-Elemente in einer Zeile ist und b die Lücke ist, die zwischen den Flex-Elementen im IE angezeigt werden soll.

Verwenden Sie in den Flex-Elementen zusammen mit der flex-Eigenschaft oben die max-width-Eigenschaft mit dem prozentualen Wert von 1/n - b.

In Ihrem Fall lautet das verallgemeinerte CSS für den Flex-Artikel:

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 5 Elementen/Zeile werden (1/5) * 100% - 1% = 19% => max-width: 19% und flex: 0 1 19%; angezeigt.

Spielen Sie mit dem Parameter b, um die Flex-Elemente kurz genug zu machen, damit flex: wrap; arbeiten kann.

0
bob-12345

Verwenden Sie einfach flex:1 0 auto;. Es wird klappen.

0
akshay kanyan