/ / ie10 und Flexboxen? (Albtraum) - CSS3, Internet-Explorer, Internet-Explorer-10, Flexbox

ie10 und flexboxes? (Albtraum) - CSS3, Internet-Explorer, Internet-Explorer-10, Flexbox

Leider muss ich meinen Website-Code kompatibel mit Internet Explorer 10 machen und habe einige Probleme, selbst nachdem ich die Dokumentation auf ihrer offiziellen Website gelesen habe

Hier ist mein CSS-Code:

.uberflex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;

display: -webkit-flex;
-webkit-flex-flow: column wrap;
-webkit-justify-content: flex-start;
-webkit-align-items: flex-start;

display: -ms-flexbox;
-ms-flex-flow: column wrap;
-ms-justify-content: flex-start;
-ms-align-items: flex-start;
}

Soweit ich weiß, unterstützt ie10 die flexbox aber nurmit dem "-ms-" Präfix, das ich hier eingefügt habe. Nach dem Überprüfen der Konsole in ie10 sieht es die "Anzeige: -ms-flexbox;" aber keine der anderen "-ms-" vorfixierten Sachen Kann jemand erklären, warum das passiert?

Vielen Dank! :-)

Antworten:

62 für die Antwort № 1

Ja, Flexbox für IE 10 ist ein absoluter Albtraum.

Hier sind einige Tipps, die IE 10 Flexbox-Unterstützung von mehreren Websites (Dies einer war sehr hilfreich):


vor allem - eine sehr nützliche Flagge (kann auf alle Elemente platziert werden):

  • Flag zum Isolieren von IE10-spezifischen CSS

    .lt-ie11 & { }


Die folgenden Definitionen sollten in den Container Element

  • Definieren Sie einen Flex-Container

    display: -ms-flexbox;

.

  • Horizontale Ausrichtung:

    -ms-flex-pack: start/end/center/justify;

.

  • Vertikale Ausrichtung

    -ms-flex-align: start/end/center/stretch/basline;


Die folgenden Definitionen sollten in den Kind Element (der "Gegenstand")

  • Elementbestellung

    Die Bestellnummer kann positiv oder negativ sein. Je niedriger die Zahl, desto näher am Container beginnt das Element

    -ms-flex-order [number]

.

  • Einstellen der Größe / Größe eines Gegenstands

    Dies ist ein wichtiges Konzept von flexbox, das steuert, wie zusätzlicher oder negativer (fehlender) Platz zwischen den untergeordneten Elementen eines Flexbox-Containers aufgeteilt wird.

    Grundsätzlich gilt, je höher die Zahl, desto mehr extraLeerzeichen werden zur bevorzugten Größe hinzugefügt (im Fall von grow), oder es wird mehr Platz vom Element abgezogen, um es passend zu machen (im Falle von Shrink). Wenn ein Wert von "0" zugewiesen wird, wird die Größe des Elements nicht beeinflusst.

    -ms-flex: [grow shrink size];

    oder, die Shorhand-Version:

    -ms-flex: [value]; // == -ms-flex: value value 0

    beachten Sie, dass IE10, wenn nicht explizit definiert, eine Standardvorzugsgröße von 0, was dazu führen kann, dass Ihr Element vollständig verschwindet. Dies kann durch Definition einer expliziten Größe (entweder in px oder %) oder definiere es als auto)


Für eine allgemeine Diskussion über Flexbox können Sie einen Blick darauf werfen Hierund eine schnelle Suche ist Hier