ie10 и flexboxes? (кошмарный сон)

К сожалению, я должен сделать свой код сайта совместимым с Internet Explorer 10, и у меня возникают некоторые проблемы, даже после прочтения документации на их официальном сайте

вот мой код 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;
}

Насколько мне известно, ie10 поддерживает flexbox, но только с-Миз-' префикс, который яположить сюда. После проверки консоли в ie10, она видит "дисплей: -ms-flexbox; " но никто другой-Миз-" предустановленные вещи ?? Кто-нибудь может уточнить, почему это происходит?

Спасибо! :-)

Ответы на вопрос(1)

да, flexbox для IE 10 - это настоящий кошмар.

Вот несколько советов, касающихся поддержки IE 10 flexbox с нескольких сайтов (этот один был очень полезным)

Прежде всего - очень полезный флаг (может быть размещен на всех элементах):

флаг для выделения специфичного для IE10 CSS

.lt-ie11 & { }

следующие определения должны быть помещены вконтейнер элемент

Определите контейнер Flex.

display: -ms-flexbox;

Горизонтальное выравнивание:.

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

Вертикальное выравнивание

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

следующие определения должны быть помещены вребенок элемент ("вещь")

Элемент заказа

номер заказа может быть положительным или отрицательным. Чем ниже число, тем ближе к началу контейнера появится элемент.

-ms-flex-order [number]

Установка предметаs расти / уменьшаться / предпочтительный размер

это важная концепция flexbox, контролирующая, как дополнительное или отрицательное (отсутствующее) пространство распределяется между дочерними элементами контейнера flexbox.

Как правило, чем больше число, тем больше дополнительного пространства добавляется к предпочтительному размеру (в случае роста) или тем больше места вычитается из элемента, чтобы он соответствовал (в случае сжатия). Если значение «0» назначен, элемент 'Размер не будет затронут.

-ms-flex: [grow shrink size];

или сокращенная версия:

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

обратите внимание, что если явно не указано, IE10 дает предпочтительный размер по умолчанию0, что может привести к тому, что ваш элемент полностью исчезнет. Это может быть смягчено путем определения явного размера (либо вpx или же%) или определяя это как)auto



Для общего обсуждения Flexbox, вы можете посмотретьВоти быстрый поискВот

ВАШ ОТВЕТ НА ВОПРОС