ie10 et flexboxes? (le cauchemar)

Malheureusement, je dois faire mon site web code compatible avec Internet Explorer 10 et vais avoir quelques problèmes, même après la lecture de la documentation sur leur site officiel

voici mon code css:

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

À ma connaissance, ie10 prend en charge flexbox, mais seulement avec l'option '-ms-' préfixe, j'en ai mis ici. Après vérification de la console dans ie10, c'est de voir le "display: -ms-flexbox;" mais aucun des autres "-ms-" pré-fixe les choses?? Quelqu'un peut-il préciser pourquoi ce qui se passe?

Merci! 🙂

Pas d'idée sur le vieux display: flexbox syntaxe - je ne suis pas sûr si ces propriétés s'appliquent même.
Merci pour la réponse BoltClock! Pourriez-vous élaborer sur ce point? Voulez-vous dire que les propriétés telles que le "-ms-flex-flow" ne fonctionnent pas dans ie10? C'est vraiment bizarre d'essayer de code pour ce que ie11 prend en charge la dernière version de flexbox de la syntaxe, mais pas pour ie10
Hmm j'avais déjà lu cette page Teemu et quand j'ai copier coller exactement ce qu'ils ont énumérés ie10 n'est pas le détecter??? il ne détecte "-ms-flexbox" comme étant une propriété de .uberflex classe, rien d'autre 🙁 Mon ie10 version est 10.0.9200.16660
Hmm... on dirait que c'est un vieux doc, avez-vous vu celui-ci?
Ouais j'ai essayé d'utiliser ceux, je viens d'ajouter "-ms-" en avant pour ie10 droit? J'ai écrit "-ms-aligner-éléments: flex-start;" et il ne les détecte pas qu'il est là sur ie10. Je suis sous Windows 7 (dans parallels, à l'aide d'un Mac) btw, si cela fait une différence.

OriginalL'auteur shan | 2013-09-10

  1. 62

    ouais, flexbox pour IE 10 est un total cauchemar.

    voici quelques conseils concernant IE 10 flexbox soutien gratté à partir de plusieurs sites (cette on a été très utile):

    tout d'abord très utiles, drapeau (peut être placé sur tous les éléments):

    • drapeau pour isoler IE10 CSS spécifiques

      .lt-ie11 & { }

    les définitions suivantes doivent être placés dans le conteneur élément

    • Définir un conteneur Flex

      display: -ms-flexbox;

    .

    • Alignement Horizontal:

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

    .

    • Alignement Vertical

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

    les définitions suivantes doivent être placés dans le enfant élément ("item")

    • Élément De Commande

      le numéro de la commande, qui peut être positif ou négatif. plus le chiffre est plus proche du conteneur de début de l'élément apparaîtra

      -ms-flex-order [number]

    .

    • Définition d'un élément de grandir/réduire/taille préférée

      c'est un concept important de flexbox, le contrôle de la façon dont supplémentaire ou négatif (manquant) l'espace est divisé entre les éléments enfants d'un flexbox conteneur.

      Fondamentalement, plus le nombre est élevé, plus l'espace supplémentaire est ajouté à la taille par défaut (dans le cas de croître), ou plus l'espace est soustrait de l'élément pour le faire rentrer (en cas de rétrécissement). Si une valeur de " 0 " est assigné de l'élément de taille ne sera pas affectée.

      -ms-flex: [grow shrink size];

      ou, le shorhand version:

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

      avis que, à moins explicitement défini, IE10 donne par défaut la taille préférée de 0, ce qui peut causer votre élément de disparaître complètement. Cet effet peut être atténué par la définition explicite de la taille (en px ou %), ou le définir comme auto)

    Pour une discussion générale de Flexbox, vous pouvez prendre un coup d'oeil ici, et une recherche rapide est ici

    Grand writeup Sangil. 🙂

    OriginalL'auteur sangil