フレックスボックススペースが機能しないのはなぜですか？

Question

私はflexboxを実装しようとしていますが、動作させることはできません。私は何が欠けていますか？私はすべてのフレックスボックスベンダーのプレフィックスを用意しています。

.main-navigation ul { 
    width:100%; 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
    display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */ 
    } 

.main-navigation ul li { 
    justify-content:space-between; 
    width:100px; 
    background:#666; 
    display:block; 
} 

目標は、左の最もliはULのコンテナの左とULのコンテナの右辺と同一平面に行くには右の最もliと面一に行くために取得することです。助けを歓迎します。

Answer 1

問題は「子」の要素が互いに間にスペースと整列させることになるので、あなたは、「親」にdisplay: flexプロパティまたはより良いと言うと要素にjustify-content: space-between;を設定する必要があります。 フレックス容器とフレックスアイテム：

.main-navigation ul { 
    width: 100%; 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
    display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */ 
    -webkit-box-pack: justify; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
    justify-content: space-between; 
} 

.main-navigation ul li { 
    width: 100px; 
    background: #666; 
    display: block; 
} 

Answer 2

Flexプロパティは、2つのカテゴリに分割されます。

一部のプロパティはコンテナのみに適用され、他のプロパティはアイテムのみに適用されます。

justify-contentプロパティはフレックスコンテナにのみ適用されます。

コードには、justify-contentが適用されているため、効果がありません。

これをコンテナに再度割り当てます。

もちろん、要素はフレックスコンテナとアイテムの両方になることができます。その場合、すべてのプロパティが適用されます。しかし、ここではそうではありません。 li要素はフレックスアイテムのみであり、コンテナのプロパティは無視されます。参照–フレックスコンテナで割っ性質–と項目のリストについては

： A Complete Guide to Flexbox

Answer 3

もう一つは心に留めておくために、フレックスコンテナにはない要素そのものにjustify-content:space-betweenを追加する必要性への追加。コンテナ内に空の要素（空のdivなど）がないことを確認します。

私のケースでは、フローティングエレメントが実行されたときのフレックスの前日から、空のdivを「クリアフィックス」として追加していました。

justify-content:space-betweenは、コンテンツのないものであっても、コンテナ内のすべての要素を正当化します。これは、配置とラッピングを混乱させる可能性があります。