Flex не поддерживает calc в IE11
Я пытаюсь создать макет с помощью Flexbox. В одном из этих макетов мне нужны 3 столбца одинаковой ширины. Для этого я использую вычисление для установки ширины столбца. Это нормально работает в современных браузерах, но, конечно, в IE это не работает. Вот мой код:
.container {
width:50vw;
margin:0 auto;
display:flex;
}
.container > div {
flex:1 0 calc(100% / 3);
}<div class = "container">
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>Как я уже упоминал, это отлично работает в современных браузерах, но в IE столбцы просто сворачиваются друг на друга, если я не использую определенный процент вместо calc.
Ответы 1
Это известная ошибка.
IE 10-11 ignore
calc()functions used inflexshorthand declarations.Since this bug only affects the
flexshorthand declaration in IE 11, an easy workaround (if you only need to support IE 11) is to always specify each flexibility property individually.
Другими словами, вместо:
flex: 1 0 calc(100% / 3)
Пытаться:
flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(100% / 3);
Также учтите: вам даже не нужна функция calc().
Если вам нужны три столбца одинаковой ширины, это подойдет:
flex: 1
или
flex: 1 0 30%
или даже:
flex: 1 0 26%;
С flex-grow: 1, определенным в сокращении flex, нет необходимости, чтобы flex-basis составлял 33,33%.
Поскольку flex-grow будет занимать свободное место на линии, flex-basis должен быть достаточно большим, чтобы принудительно выполнить перенос (если это станет необходимым).
В этом случае с flex-basis: 26% достаточно места для полей, границ, отступов и т. д., Но никогда не бывает достаточно места для четвертого элемента.