/ / ie10 a flexboxy? (nočná mora) - css3, Internet Explorer, internet-explorer-10, flexbox

ie10 a flexboxy? (nočná mora) - css3, Internet Explorer, internet-explorer-10, flexbox

Bohužiaľ musím urobiť kód mojej webovej lokality kompatibilný s programom Internet Explorer 10 a mám nejaké problémy aj po prečítaní dokumentácie na oficiálnych stránkach

tu je môj css kód:

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

Podľa môjho názoru ie10 podporuje flexbox, ale ibas prefixom "-ms-", ktorý som tu položil.Po kontrole konzoly v ie10 sa zobrazuje "display: -ms-flexbox", ale žiadna iná "-ms-" prednastavená vec ? Môže niekto objasniť, prečo sa to deje?

Vďaka! :-)

odpovede:

62 pre odpoveď č. 1

jo, flexbox pre IE 10 je celková nočná mora.

Tu je niekoľko tipov, ktoré sa týkajú podpory IE 10 flexbox z viacerých stránok (toto jeden bol veľmi užitočný):


v prvom rade veľmi užitočný príznak (môže byť umiestnený na všetkých prvkoch):

  • príznak pre izoláciu CSS pre IE10

    .lt-ie11 & { }


mali by sa vkladať tieto definície kontajner element

  • Definujte kontajner Flex

    display: -ms-flexbox;

.

  • Horizontálne zarovnanie:

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

.

  • Vertikálne zladenie

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


mali by sa vkladať tieto definície dieťa prvok ("položka")

  • Objednávanie prvkov

    poradové číslo môže byť pozitívne alebo negatívne. čím nižšie číslo, čím bližšie k štartu kontajnera sa objaví prvok

    -ms-flex-order [number]

.

  • Nastavenie položky rastú / zmršťuje / uprednostňuje veľkosť

    je to dôležitá koncepcia flexboxu, ktorá kontroluje, ako je extra alebo negatívny (chýbajúci) priestor rozdelený medzi podriadené prvky kontajnera flexbox.

    V zásade je vyššie číslo, tým viacPriestor sa pripočíta k prednostnej veľkosti (v prípade rastu), alebo väčší priestor sa odpočíta od prvku, aby sa prispôsobil (v prípade zmršťovania). Ak je priradená hodnota "0", veľkosť prvku sa neovplyvní.

    -ms-flex: [grow shrink size];

    alebo, shorhand verzia:

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

    Všimnite si, že pokiaľ nie je explicitne definované, IE10 poskytuje predvolenú predvolenú veľkosť 0, čo môže spôsobiť úplné zmiznutie vášho prvku. To možno zmierniť definovaním explicitnej veľkosti (buď v px alebo %) alebo ho definovať ako auto)


Pre všeobecnú diskusiu o Flexboxu sa môžete pozrieť tu, a rýchle vyhľadávanie je tu