/ / ie10 i flexbox? (koszmar) - css3, Internet Explorer, Internet Explorer 10, Flexbox

ie10 i flexbox? (koszmar) - css3, Internet Explorer, Internet Explorer 10, Flexbox

Niestety, muszę zrobić kod mojej strony internetowej zgodny z Internet Explorer 10 i mam pewne problemy, nawet po przeczytaniu dokumentacji na ich oficjalnej stronie

tutaj jest mój kod 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;
}

Według mojej wiedzy, czyli 10 obsługuje Flexbox, ale tylkoz prefiksem "-ms-", który tutaj umieściłem Po sprawdzeniu konsoli w ie10, zobaczyłem "display: -ms-flexbox;" ale żadna z innych "-ms-" wstępnie ustalonych rzeczy Czy ktokolwiek może wyjaśnić, dlaczego tak się dzieje?

Dzięki! :-)

Odpowiedzi:

62 dla odpowiedzi № 1

tak, flexbox dla IE 10 to koszmar.

Oto kilka wskazówek dotyczących obsługi Flexbox IE 10 skasowanych z kilku stron (to jeden był bardzo pomocny):


przede wszystkim - bardzo przydatna flaga (może być umieszczona na wszystkich elementach):

  • flaga do izolowania CSS specyficznego dla IE10

    .lt-ie11 & { }


następujące definicje należy umieścić w pojemnik element

  • Zdefiniuj kontener Flex

    display: -ms-flexbox;

.

  • Wyrównanie w poziomie:

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

.

  • Pionowe wyrównanie

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


następujące definicje należy umieścić w dziecko element ("przedmiot")

  • Element Zamówienie

    numer zamówienia może być dodatni lub ujemny. im niższy numer, tym bliżej do początku pojemnika pojawi się element

    -ms-flex-order [number]

.

  • Ustawianie rosnącej / zmniejszanej / preferowanej wielkości przedmiotu

    jest to ważna koncepcja flexbox, kontrolująca, w jaki sposób dodatkowa lub negatywna (brakująca) przestrzeń jest dzielona między elementy potomne kontenera Flexbox.

    Zasadniczo im wyższa liczba, tym więcejprzestrzeń jest dodawana do preferowanego rozmiaru (w przypadku wzrostu) lub więcej miejsca jest odejmowane od elementu, aby dopasować (w przypadku zmniejszenia). Jeśli zostanie przypisana wartość "0", nie wpłynie to na rozmiar elementu.

    -ms-flex: [grow shrink size];

    lub, wersja shorhand:

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

    zauważ, że o ile nie określono wyraźnie, IE10 podaje domyślny preferowany rozmiar 0, co może spowodować całkowite zniknięcie twojego elementu. Można to złagodzić, definiując wyraźny rozmiar (albo w px lub %) lub zdefiniowanie go jako auto)


W celu ogólnej dyskusji na temat Flexbox, możesz rzucić okiem tutaji szybkie wyszukiwanie tutaj