Flexbox не работает на iPad и Safari

Я использую flexbox на веб-сайте, и он падает на iPad Air, iPad 3 и Safari PC.

Дизайн и код похожи на этот код. http://codepen.io/anon/pen/xwJzEg/

display: flex;
flex-wrap: wrap;

Вот как это выглядит на тех устройствах, где возникает проблема:

Любые советы, как это сделать?

Ответ 1

Возможно, вам стоит рассмотреть поддержку браузера Safari для flexbox.

Хотя Safari 9 поддерживает все стандартные свойства flex, с Safari 8 и старше вам нужно будет использовать префиксы поставщиков.

Внесите эту настройку в код:

.container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-flex; /* NEW */
    display: flex;
    -webkit-flex-wrap: wrap; /* NEW */
    flex-wrap: wrap;
    font-family: "Open Sans";
}

См. поддержку браузера flexbox здесь: http://caniuse.com/#search=flexbox

Рассмотрим использование Autoprefixer.

См. примеры кода flexbox с префиксами: The Ultimate flexbox Cheat Sheet

Ответ 2

Я использовал Autoprefixer, как это было предложено в ответах.

Я использую gulp для обработки этого, когда пишу SASS. Вот руководство.

Ответы здесь предполагают использовать префиксное свойство перед не префиксом. Я согласен с небольшой коррекцией.

.container {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;   
    flex-wrap: wrap;
}

В идеале вам нужно перечислить все префиксные свойства, прежде чем вы начнете использовать не префиксные. Ответ @Michael_B на мой взгляд не идеален.

Я надеюсь, что люди найдут это полезным.

Ответ 3

Пробовали ли вы устанавливать значения flex для элементов li первого и последнего ребенка? Я обнаружил, что iPads могут запутаться, если ни один из гибких элементов в гибком контейнере не имеет значения flex. Например:

.container li:first-child {
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1;
}
.container li:nth-child(4) {
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1;
}