Safari 8 Flexbox float und centre

Question

Was auch immer ich mache, ich kann die Spalten, die links und rechts schweben, nicht zur Mitte und zur Mitte des Containers ausrichten. Gibt es einen Weg mit Flexbox, nur eine linke und rechte Spalte zu haben, aber immer noch in der Mitte auszurichten? Es funktioniert in Firefox und Chrome, aber nicht auf Safari 8.

https://jsfiddle.net/vhem8scs/68/

.container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #ccc; 
    height: 200px; 
    margin-top: 20px; 
} 

.column:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 

.column div { 
    float: left; 
} 
.column div:last-child { 
    float: right; 
} 

aktualisieren

ich die folgende Zeile in den Behälter gegeben.

justify-content: space-between 

Während es an der Mitte/Mitte des Containers ausgerichtet ist, funktionieren die Floats jetzt nicht.

Answer 1

Leider ist es ziemlich schwierig zu visualisieren, was Sie mit Ihren Stilen erreichen möchten, aber hier ist meine vorläufige Analyse des Problems.

Sobald Sie ein Element als Flex-Container deklariert haben, folgen alle untergeordneten Elemente den Flexbox-Regeln. Float-Stile werden im Wesentlichen ignoriert. Daher möchten Sie möglicherweise versuchen, die Eigenschaften flex-grow, flex-shrink und flex-basis für die untergeordneten Elemente zu verwenden, um sicherzustellen, dass die Spalten an der richtigen Position sitzen.

Wenn das Ziel darin besteht, einfach Platz zwischen den Spalten einzufügen, verwenden Sie die justify-content-Eigenschaft mit space-around oder space-between auf dem übergeordneten Flex-Element.

Hoffe, das hilft!