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. Это означает, что он относительно новый, и некоторые браузеры не обеспечивают полную поддержку гибких свойств.

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

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

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

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

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

Ответ 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/