Gleichmäßig verteilen divs horizontal in floated (oder Inline-Block) Eltern

Question

Ich versuche, untergeordneten Elemente gleichmäßig innerhalb ihrer Eltern zu verteilen. Ich kenne die text-align:justify und Flex-Methoden - ich verwende derzeit die Flex-Methode.

Das Problem ist, dass mein Layout (ein Logo [rot] nach links, die float:left oder display:inline-block und eine Schaltfläche [schwarz] ist, das ist auf der rechten Seite und float:right) verlangt, dass die Flex-Mutter div float:left oder display:inline-block sein (so dass es sitzt zwischen dem Logo und dem Knopf), aber das Schweben oder Anzeigen des Inline-Blocks unterbricht die Flex-Verteilung, die ich für die Kinder angewendet habe.

Hier ist eine CodePen von wo ich so weit bin: http://codepen.io/dmoz/pen/QKaQrL

Dies ist ein Bild von dem, was ich brauche:

Irgendwelche Ideen?

Answer 1

Ich habe Ihr CSS aktualisiert. Überprüfen Sie die Fiddle: 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; 
}