Flex-Eigenschaft funktioniert nicht im IE

Lesezeit: 4 Minuten

Flex Eigenschaft funktioniert nicht im IE
Schwindel

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 folgenden Informationen eingefügt.

Chrome funktioniert wie vorgesehen; IE11 schlägt fehl.

Bild des Layout-Erfolgs auf Chrome:

Geben Sie hier die Bildbeschreibung ein

Bild eines Layoutfehlers in IE11

Geben Sie hier die Bildbeschreibung ein

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

1646317933 805 Flex Eigenschaft funktioniert nicht im IE
Michael Benjamin

IE hat ein Problem beim Analysieren der flex Eigentum.

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

  • Verwenden Sie die Langschrifteigenschaften anstelle der Kurzschrift.

    Statt so etwas: flex: 0 0 35%.

    Versuche dies:

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

  • Versicher dich flex-shrink aktiviert.

    Also statt dessen: flex: 0 0 35%

    Versuche dies: flex: 0 1 35%

    (In anderen Fällen flex-shrink muss sein deaktiviert: Flex-Element überlappt ein anderes Element in IE11)


  • Vorsicht bei prozentualen und einheitenlosen Werten mit flex-basis

    Dies kann von Ihrer Version von IE11 abhängen. Das Verhalten scheint unterschiedlich zu sein.

    Probieren Sie diese Variationen aus:

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

In acht nehmen! Bestimmte CSS-Minifier werden ersetzt 0px mit 0was beim Debuggen sehr lästig sein kann (sie werden sich jedoch nicht ändern 0% aus irgendeinem Grund).

Weitere Details hier:

  • Bildverhalten innerhalb der Flexbox (Zeilen eingebettet in Spalten)
  • Warum verhält sich die Shorthand Flex-Eigenschaft anders als die Longhand-Eigenschaft im IE?

  • Anstatt flex: 1 verwenden flex: auto (oder hinzufügen flex-basis: auto)

    Wenn Sie verwenden flex: 1 in flex-direction: row (z. B. auf größeren Bildschirmen), und Sie wechseln zu flex-direction: column Bei einer Medienabfrage (z. B. für mobile Geräte) stellen Sie möglicherweise fest, dass Ihre Flex-Elemente zusammenbrechen.

    Fügen Sie in Ihrer Medienabfrage hinzu flex-basis: auto. Dies überschreibt die flex-basis Wert in der flex: 1 Regel (was normalerweise 0, 0px oder 0%je nach Browser).

    Verwenden flex: auto sollte auch funktionieren, was kurz für:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto

  • Verwenden Sie altmodisch width / height Eigenschaften statt flex.

  • Verwenden block Anordnung statt flex Layout.

    Sie müssen das Flex-Layout nicht vollständig aufgeben. Aber für einen bestimmten Container können Sie die Arbeit vielleicht erledigen display: block anstatt display: flex; flex-direction: column.

    Als ich beispielsweise den Padding-Trick verwenden musste, um ein Video reaktionsschnell in ein Flex-Element einzubetten, stieß ich auf das Hindernis, dass einige Browser nicht gut mit prozentualer Auffüllung (oder Rand) in einem Flex-Container funktionieren.

    Damit es funktioniert habe ich das umgestellt display Wert auf dem Flex-Item von diesem:

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

    dazu:

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

  • Hallo! Kennen Sie ein Polyfill, das den Flex von Shorthand auf Longhand umwandelt?

    – Kristall

    21. Mai 2020 um 20:32 Uhr

  • Der Wechsel von der Kurzschrift zur mehrzeiligen Definition hat in meiner Situation funktioniert.

    – bkbarton

    6. Oktober 2020 um 15:26 Uhr

Für mich mit

  flex: 1 1 auto;

anstatt

  flex: 1;

das Flex-Problem im IE 11 gelöst.

  • Nun, das ist was Anstatt flex: 1 verwenden flex: auto bedeutet, als flex: auto übersetzt genau das, flex: 1 1 auto

    – Asons

    30. November 2017 um 7:43 Uhr


1646317933 301 Flex Eigenschaft funktioniert nicht im IE
Akshay Kanyan

Benutz einfach flex:1 0 auto;. Es wird klappen.

Begrenzen Sie wie in der Antwort von @Michael_B das Wachstum mit Flexbox flex Eigentum: flex: 0 1 (1/n - b) genommen in %-Wert, wo n ist die Anzahl der Flex-Elemente in einer Reihe und b ist die Lücke, die Sie zwischen Flex-Elementen im IE sehen möchten.

Auf den Flex-Artikeln zusammen mit flex obige Eigenschaft verwenden Sie die max-width Eigenschaft mit prozentualem Wert von 1/n - b.

In Ihrem Fall wäre das verallgemeinerte CSS für das Flex-Element:

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 tatsächlichen Fall mit 5 Artikeln / Reihe werden es sein (1/5) * 100% - 1% = 19% => max-width: 19% und flex: 0 1 19%;.

Spiel mit b Parameter, um Flex-Elemente kurz genug zu machen, um dies zu ermöglichen flex: wrap; Arbeit.

1646317934 323 Flex Eigenschaft funktioniert nicht im IE
Raa Vijay

In meinem Fall lehnt der CSS-Minifier die ab px Einheit des letzten Arguments in -ms-flex Kurzformregel habe ich versucht zu verwenden % Einheit und es funktioniert gut.

924350cookie-checkFlex-Eigenschaft funktioniert nicht im IE

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy