Safari 8 Flexbox浮動小数点と中心

Question

私が何をしていても、左右に浮かび上がって中央に配置され、その中央に揃う列を得ることはできません。 Flexboxは左右の列を持つだけの方法ですが、中央に配置する方法はありますか？それは私がコンテナに次の行を追加

更新サファリ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; 
} 

上のFirefoxとChromeで正常に動作しますが、ありません。

justify-content: space-between 

これはコンテナの中心/中央に揃えていますが、浮動小数点は現在機能しません。

Answer 1

あなたのスタイルで達成しようとしていることを視覚化することは、むしろ難しいですが、ここではその問題の予備的な分析です。

要素をフレックスコンテナに宣言すると、すべての子要素がフレックスボックスの規則に従います。フロートスタイルは基本的に無視されます。結果として、子供が正しい位置に座っていることを確認するために、子供にflex-grow、flex-shrink、およびflex-basisのプロパティを使用することを試してみてください。

単に列の間にスペースを入れることを目的としている場合は、justify-contentプロパティを親flex要素のspace-aroundまたはspace-betweenのいずれかとして使用します。

希望すると便利です。