2

Имеется флекс-контейнер. И прекрасно отображается в браузерах, кроме IE 11. Там почему-то последний элемент он выносит на следующую строку. Как с этим справится? Пробовала задавать значения flex специально для IE с помощью символа "//", но никаких реакций.

CSS

.box {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
width: 100%;
margin: 0 auto 3em;
}
.box__item {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 0 260px;
flex: 0 0 260px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
margin:inherit;
}
5
  • 1
    ссылка caniuse.com/#search=flex как-бы намекает, что в ИЕ11 нормально работать не будет, т.к. поддержка частичная и присутствует много багов
    – lexxl
    3 ноя 2016 в 13:22
  • flex-wrap: wrap; - зачем это писать, если переноса быть не должно?
    – Qwertiy
    28 ноя 2016 в 12:34
  • @Qwertiy перенос осуществляется на маленьких экранах
    – Alla
    30 ноя 2016 в 8:42
  • @Alla, ну так помести его в media-запрос?
    – Qwertiy
    30 ноя 2016 в 14:31
  • @Qwertiy в данном случае wrap выглядит гораздо лучше. Потому что на IE, если задать nowrap, он последний элемент контейнера на половину обрезает, словно он не вмещается
    – Alla
    1 дек 2016 в 6:47

1 ответ 1

3

Попробуйте явно задать элементам внутри флекса width и свойствa flex-grow, flex-shrink и flex-basis:

flex-grow: 0;
flex-shrink: 0;
flex-basis: ширина элемента;

Дело в том, что IE по умолчанию ставит flex-grow: 1, а остальные браузеры flex-grow: 0 (со шринком наоборот), вследствие чего элементы всегда укладываются в один ряд, если это не указать принудительно. В трех словах flex-grow - на сколько элемент может растянуться относительно остальных, flex-shrink - как сильно он будет жаться относительно остальных, и basis - его базовая ширина. Вот тут есть подробнее с примером использования туториал по флексу

Ваш код надо немного подправить, надо еще width добавить в итемы, затем, элементы внутри флекс контейнера не обязательно делать с display flex:

.box {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
width: 100%;
margin: 0 auto 3em;
}
.box__item {
position: relative;
text-align: center;
-webkit-flex: 0 0 260px;
flex: 0 0 260px;
width: 260px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
margin:inherit;
}
5
  • пробовала,но никак не реагирует
    – Alla
    3 ноя 2016 в 13:46
  • Вы не могли бы запостить эту часть кода, так будет проще разобраться.
    – Mikl
    3 ноя 2016 в 13:48
  • добавила CSS в каком он виде сейчас к вопросу
    – Alla
    3 ноя 2016 в 13:55
  • обновил ответ с учетом этого
    – Mikl
    3 ноя 2016 в 14:18
  • Увы, та же самая картина
    – Alla
    3 ноя 2016 в 14:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.