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, но только с префиксом '-ms-', который я здесь разместил. После проверки консоли в ie10 он видит "display: -ms- flexbox;" но ни одна из других "-ms-" предварительно зафиксированных вещей?? Кто-нибудь может объяснить, почему это происходит?

Спасибо!: -)

Ответы

Ответ 1

да, flexbox для IE 10 - полный кошмар.

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

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

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

    .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]

.

  • Настройка размера/сжатия/предпочтительного размера элемента

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

    В основном, чем выше число, тем больше добавочного пространства добавляется к предпочтительному размеру (в случае роста) или больше места вычитается из элемента, чтобы он соответствовал (в случае усадки). Если назначено значение "0", размер элемента не будет затронут.

    -ms-flex: [grow shrink size];

    или, версия shorhand:

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

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


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