Flexbox-Code funktioniert in allen Browsern außer Safari. Warum?

Question 1

Rasterspalten mit Listen-Tags müssen alle 3 Spalten in der richtigen Reihenfolge angezeigt werden, wobei die automatische Breite für jedes zusätzliche HTML-Listenelement aktiviert ist.

Dies ist mein Beispiel:

 <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>

Erweitern Sie das Snippet

Dies ist, was ich bisher versucht habe und funktioniert absolut gut auf jedem anderen Browser, aber nicht kompatibel mit Safari-Browser, es sei denn, ich füge Folgendes hinzu : display: -webkit-flex;.

Ich möchte die Ausgabe folgendermaßen konvertieren:

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

Es ist wichtig, dass dies für den Safari-Browser funktioniert. Bisher kann ich dieses Problem anscheinend überhaupt nicht lösen. Ich würde mir jede Hilfe aneignen :)

Testlink:

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

Question 2

Flexbox ist eine CSS3-Technologie. Dies bedeutet, dass es relativ neu ist und einige Browser die Flex-Eigenschaften nicht vollständig unterstützen.

Hier ist ein heruntergekommener:

IE 8 und 9 unterstützen keine Flexbox. Wenn Sie Flex-Eigenschaften in diesen Browsern verwenden möchten, verschwenden Sie keine Zeit. Eine Flexbox-Polyfüllung machte eine Weile die Runde, aber es funktionierte nicht gut und wird nicht mehr gewartet.
IE 10 unterstützt eine frühere Version von Flexbox und erfordert Herstellerpräfixe . Beachten Sie, dass bestimmte Eigenschaften aus der aktuellen Spezifikation nicht in IE10 unterstützt werden (wie zum Beispiel flex-grow, flex-shrinkund flex-basis). Siehe den Flexbox 2012-Eigenschaftsindex .
IE 11 ist gut, aber fehlerhaft. Es basiert auf dem aktuellen Flexbox-Standard . Siehe die BEKANNTEN PROBLEME Registerkarte auf dieser Seite für einige der Probleme. Siehe auch: Flex-Eigenschaft funktioniert nicht im IE
Mit Chrome, Firefox und Edge sind Sie rundum gut. Sie werden kleinere Fehler und Inkonsistenzen finden, aber es gibt normalerweise einfache Lösungen. Sie müssen sich der implizierten minimalen Flex- Größe bewusst sein , die manchmal Probleme mit der Größe und der Bildlaufleiste verursacht.
Safari-Versionen 9 und höher unterstützen die aktuelle Flexbox-Spezifikation ohne Präfixe. Ältere Safari-Versionen erfordern jedoch -webkit-Präfixe. Manchmal min-widthund max-widthverursachen Ausrichtungsprobleme, die mit flexÄquivalenten gelöst werden können . Siehe Flex-Elemente, die in Safari nicht ordnungsgemäß gestapelt werden

Eine vollständige Übersicht über die Unterstützung von Flexbox-Browsern finden Sie auf dieser Seite: http://caniuse.com/#search=flex

Verwenden Sie Autoprefixer , um schnell viele (aber nicht unbedingt alle) Herstellerpräfixe hinzuzufügen . Für Safari finden Sie in diesem Artikel für -webkit-Präfixe , dass einige Präfix Generatoren nicht enthalten.

Eine Liste der häufigsten Flex-Fehler und ihrer Problemumgehungen finden Sie unter Flexbugs .

Außerdem gibt es auf dieser Site:

Flexbox Tag Info

Question 3

Es funktioniert bei mir Anzeige: -webkit-inline-box; auf einer Safari.