it-swarm.com.ru

свойство flex не работает в IE

Мне не удалось определить, почему flexbox не работает в IE 11.

Для тестирования я получил очень простую разметку flexbox от CodePen и вставил информацию ниже.

Хром работает как задумано; IE11 не работает.

Изображение layout-success, работающего в Chrome:

 enter image description here

Изображение сбоев компоновки в IE11

 enter image description here

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

17
Dizz

В IE возникла проблема с анализом свойства flex.

Вот несколько обходных путей, которые сработали для меня:

  • Используйте свойства длинной руки вместо сокращения.

    Вместо чего-то вроде этого: flex: 0 0 35%.

    Попробуй это:

    • flex-grow: 0
    • flex-shrink: 0
    • flex-basis: 35%


  • Осторожно с процентными и единичными значениями с помощью flex-basis

    Это может зависеть от вашей версии IE11. Поведение, кажется, меняется.

    Попробуйте эти варианты:

    • flex: 1 1 0
    • flex: 1 1 0px
    • flex: 1 1 0%

Осторожно! Некоторые минификаторы css заменят 0px на 0, что может быть очень раздражающим для отладки (однако, по какой-то причине они не изменят 0%).

Подробнее здесь:


  • Вместо flex: 1 используйте flex: auto (или добавьте flex-basis: auto)

    Если вы используете flex: 1 в flex-direction: row (например, на больших экранах) и переключаетесь на flex-direction: column в медиа-запросе (скажем, для мобильных устройств), вы можете обнаружить, что ваши гибкие элементы разрушаются.

    В медиа-запрос добавьте flex-basis: auto. Это переопределит значение flex-basis в правиле flex: 1 (обычно это 0, 0px или 0%, в зависимости от браузера). 

    Использование flex: auto также должно работать, что сокращенно означает:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto

  • Используйте свойства старой моды width/height вместо flex.

  • Используйте макет block вместо макета flex.

    Вам не нужно полностью отказываться от гибкого макета. Но для конкретного контейнера вы можете выполнить работу с помощью display: block вместо display: flex; flex-direction: column.

    Например, при необходимости использовать трюк с отступом для быстрого встраивания видео в элемент flex, я столкнулся с препятствием, заключающимся в том, что некоторые браузеры не работают с процентным отступом (или полем) в контейнере flex. .

    Чтобы это работало, я переключил значение display на элемент flex:

    /* a flex item, also a nested flex container */
    #footer-container > article {
        display: flex;
        flex-direction: column;
    }
    

    к этому:

    #footer-container > article {
        display: block;
    }
    
33
Michael_B

Для меня, используя 

  flex: 1 1 auto;

вместо

  flex: 1;

решена проблема с флексом IE 11.

6
Embedded_Mugs

В моем случае минимизатор CSS отклоняет единицу px последнего аргумента в правиле сокращения -ms-flex, я попытался использовать единицу %, и она отлично работает.

0
Raa Vijay

Как и в ответе @Michael_B, ограничьте рост с помощью свойства flex Flexbox: flex: 0 1 (1/n - b) принимается в% value, где n - количество элементов flex в строке, а b - разрыв, который вы хотите видеть между элементами flex в IE.

На flex-элементах вместе со свойством flex используйте свойство max-width с процентным значением 1/n - b.

В вашем случае обобщенный CSS для элемента flex будет выглядеть так:

li {
    // ... the remaining code from your snippet
    // Calculate the following manually and insert or use CSS preprocessor that does math for you.
    // See the formula explanation above.
    max-width: (your flex container max-width / 2) * 100% - b; 
    flex: 0 1 (your flex container max-width / 2) * 100% - b;
}

В реальном случае с 5 пунктами/строкой будут (1/5) * 100% - 1% = 19% => max-width: 19% и flex: 0 1 19%;.

Поиграйте с параметром b, чтобы элементы flex были достаточно короткими для работы flex: wrap;.

0
bob-12345

Просто используйте flex:1 0 auto;. Это будет работать.

0
akshay kanyan