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

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

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

Chrome работает по назначению; IE11 не работает.

Изображение успеха макета в Chrome:

введите описание изображения здесь

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

введите описание изображения здесь

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>

Ответы

Ответ 1

У IE есть проблема, анализирующая свойство flex.

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

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

    Вместо этого: flex: 0 0 35%.

    Попробуйте следующее:

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

  • Убедитесь, что flex-shrink включен.

    Итак, вместо этого: flex: 0 0 35%

    Попробуйте следующее: flex: 0 1 35%

  • Вместо 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.

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

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

    :

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

Ответ 2

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

  flex: 1 1 auto;

вместо

  flex: 1;

решил проблему с гибкостью в IE 11.

Ответ 3

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