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

Question

Сетка столбцов с тегами списка, мне нужно отображать в правильном порядке на каждые 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>

Это то, что я пробовал до сих пор и работает абсолютно нормально на любом другом браузере, но не совместимо с браузером Safari, если я не добавлю это: display: -webkit-flex;,

Я хочу преобразовать вывод так:

1 4 7 10
2 5 8 11
3 6 9 12

Очень важно, чтобы это работало для браузера Safari, но пока я не могу решить эту проблему, мне нужна любая помощь:)

Тестовая ссылка:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

Answer 1

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

Вот истощение:

• IE 8 и 9 не поддерживают flexbox. Если вы хотите использовать свойства flex в этих браузерах, не тратьте время впустую. Флексбокс polyfill сделал обходы некоторое время, но это не работало хорошо и больше не поддерживается.

• IE 10 поддерживает предыдущую версию flexbox и требует префиксов поставщиков. Имейте в виду, что некоторые свойства из текущей спецификации не поддерживаются в IE10 (например, flex-grow, flex-shrink а также flex-basis). См. Индекс свойств Flexbox 2012.

• IE 11 хорош, но глючит. Он основан на текущем стандарте flexbox. См. Вкладку ИЗВЕСТНЫЕ ПРОБЛЕМЫ на этой странице для решения некоторых проблем. Также смотрите: свойство flex не работает в IE

• С Chrome, Firefox и Edge у вас все хорошо. Вы найдете незначительные ошибки и несоответствия, но обычно есть простые исправления. Вам нужно знать о предполагаемом минимальном размере Flex, который иногда вызывает проблемы с размером и полосой прокрутки.

• Safari версии 9 и выше поддерживают текущие спецификации flexbox без префиксов. Старые версии Safari, однако, требуют -webkit- префиксы. Иногда min-width а также max-width вызвать проблемы выравнивания, которые могут быть решены с помощью flex эквиваленты. См. Элементы Flex не складываются должным образом в Safari

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

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

Список распространенных ошибок flex и способы их обхода смотрите в Flexbugs.

Также на этом сайте есть:

• Информация о Flexbox Tag

Answer 2

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

Answer 3

вы можете использовать начальную загрузку и изменить свой код в следующих строках: