浮動小数点（またはインラインブロック）の親内でdivを水平方向に均等に分配する

Question

私は、子アイテムをその親内で均等に水平に分配しようとしています。私はtext-align:justifyとflexメソッドを認識しています。私は現在flexメソッドを使用しています。

問題は私のレイアウト（float:leftまたはdisplay:inline-blockの左ボタンにロゴ[赤] [黒]それは右とfloat:rightにだが）フレックス親のdivがfloat:leftまたはdisplay:inline-blockすることが必要であること（それようでありますロゴとボタンの間に座っている）が、フローティングまたはインラインブロックを表示すると、私が子供に適用したフレックス分布が壊れます。

ここで私はこれまででよどこのCodePenです：

任意のアイデア：これは私が必要なもののイメージがあるhttp://codepen.io/dmoz/pen/QKaQrL

は？

Answer 1

あなたのCSSが更新されました。あなたはそれが配布をオフにスローし、アイテムが不均一になりますよう、（一見）ランダムなマージンを追加していきました理由としてhttps://jsfiddle.net/Lq89dwxL/

.header { 
    display: flex; 
    width: 100%; 
    height: 100px; 
    background: #f5f5f5; 
    margin: 0; 
    padding: 0 10px; 
    overflow: auto; 
} 
.logo { 
    width: 100px; 
    height: 30px; 
    margin: 8px 50px 10px 0; 
    background: red; 
} 
button { 
    width: 30px; 
    height: 30px; 
    margin: 8px 0 0 50px; 
    border: none; 
    background: black; 
} 
.item_container { 
    width:100%; 
    display: flex; 
    justify-content: space-between; 
    padding: 0 55px 0 15px; 
} 
.item { 
    width:25px; 
    height: 30px; 
    background: blue; 
    margin: 8px 5px; 
}