Flexbox, который работает во всех браузерах, кроме Safari. Зачем?

Сетчатые столбцы с тегами списка, мне нужно отобразить в правильном порядке на каждые 3 столбца, с автоматической шириной, включенной для каждого дополнительного элемента списка HTML.

Это мой пример:

 <style>
        ul {
            margin: 0;
            padding: 0;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 150px;
            width:auto;
        }
    
        li {
            float: left;
            display: inline-block;
            list-style: none;
            position: relative;
            height: 50px;
            width: 50px;
        }
    </style>

<ul>
    <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>
    <li>11</li>
    <li>12</li>
    </ul>

Ответ 1

Flexbox - технология CSS3. Это означает, что он относительно новый, и некоторые браузеры не обеспечивают полную поддержку гибких свойств.

Здесь прогон:

IE 8 и 9 не поддерживают flexbox. Если вы хотите использовать свойства flex в этих браузерах, не беспокойтесь тратить свое время. A Flexbox polyfill сделал раунды какое-то время, но это не сработало и больше не поддерживается.
IE 10 поддерживает предыдущую версию flexbox и требует префиксы поставщика. Имейте в виду, что некоторые свойства текущей спецификации не поддерживаются в IE10 (например, flex-grow, flex-shrink и flex-basis). См. Flexbox 2012 Индекс свойств.
IE 11 хорош, но глючит. Он основан на текущем стандарте flexbox. Для некоторых проблем см. Вкладку ИЗВЕСТНЫЕ ВОПРОСЫ на эту страницу. Также см.: свойство flex не работает в IE
С Chrome, Firefox и Edge вы все вокруг. Вы найдете незначительные ошибки и несоответствия, но обычно есть простые исправления. Вам нужно знать "Подразумеваемый минимальный размер шрифта" , который иногда вызывает проблемы с размерами и полосой прокрутки.
Варианты Safari 9 и выше поддерживают текущую спецификацию flexbox без префиксов. Однако для старых версий Safari требуется префикс -webkit-. Иногда min-width и max-width вызывают проблемы с выравниванием, которые могут быть устранены с помощью эквивалентов flex. См. Элементы Flex не правильно укладываются в Safari

Полный обзор поддержки браузера flexbox см. на этой странице: http://caniuse.com/#search=flex

Для быстрого добавления многих (но не обязательно всех) префиксов поставщиков используйте Autoprefixer. Для Safari см. в этой статье для префиксов -webkit-, которые не содержат некоторые префиксные генераторы.

Список общих ошибок Flex и их обходные пути см. Flexbugs.

Кроме того, на этом сайте есть:

Flexbox Информация о тегах

Ответ 2

Он работает для меня display: -webkit-inline-box; в сафари.

Ответ 3

Тестовая ссылка: http://jsfiddle.net/rafcastro77/3zd7yspg/59/

Мне удалось найти способ запланировать с помощью этого альтернативного способа JQuery, имитирующего flex-wrap: wrap with:

 <style>

    .wrap{float:left; width:50px; border:1px solid #000;}

</style>
<script>

    var divs = $("ul > li");
    for(var i = 0; i < divs.length; i+=3) {
    divs.slice(i, i+3).wrapAll("<div class='wrap'></div>");
    }

</script>

Рабочая версия для сафари или для любого другого браузера, не поддерживающего flexbox: http://jsfiddle.net/rafcastro77/3zd7yspg/66/