Свойство 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-basis

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

Попробуйте следующие варианты:
- flex: 1 1 0
- flex: 1 1 0px
- flex: 1 1 0%
Подробнее здесь:
- Поведение изображения в flexbox (строки, встроенные в столбцы)
- Почему свойство shorthand flex ведет себя иначе, чем свойства long hand в IE?

Вместо 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;. Он будет работать.