Почему не работает flex wrap на iOS?

Здравствуйте.

Есть несколько рядов карточек (по 3 карточки в каждом ряду) и в зависимости от размера окна браузера ряды сужаются с помощью flex-wrap: wrap и min-width, а карточек в ряду становится 2 или 1. Однако flex-wrap: wrap отказывается работать на iOS-устройствах (в частности, на iPad вне зависимости от браузера) и в результате получаются все карточки в одну колонку вместо целых рядов по 2 карточки.

Когда же использую flex-wrap: nowrap то всё отображается надлежащим образом (то есть flexbox работает, но этот способ мне не подходит).

Уже прописал казалось-бы все префиксы, но результат по-прежнему неудовлетворительный. Как решить проблему?

Пример для наглядности на JSfiddle.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
flex-flow: row wrap;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;	

-webkit-box-orient: horizontal; 
-webkit-box-direction: normal; 
-webkit-flex-direction: row; 
-ms-flex-direction: row; 
flex-direction: row;
  • Вопрос задан
  • 2919 просмотров
Решения вопроса 1
sadisme
@sadisme
font-size:30rem
для детейflex:0 1 50%задайте
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы