Flexbox-Eigenschaften tun nichts

Question

Ich versuche, einen Nav-Header mit Flexbox zu erstellen. Hier ist der Code: http://codepen.io/trans/pen/VmeRQx

<header> 
    <nav> 
    <ul> 
     <li><a class="block" href="/index.html"><span class="title">⭾ T a b</span></a></li> 
     <li><a class="block" href="/products/index.html">Products</a></li> 
     <li><a class="block" href="/research/index.html">Research</a></li> 
     <li><a class="block" href="/advocacy/index.html">Advocacy</a></li> 
     <li><a class="block" href="/support/index.html">Support</a></li> 
    </ul> 
    </nav> 
</header> 

Und die CSS:

header { 
    background: #222; 
    padding: 0.5em; 
    color: white; 
} 

header nav { 
    width: 1080px; 
    margin: 0 auto; 
    border: 1px solid yellow; 
} 

header nav .title { 
    color: white; font-size: 2em; 
} 

header nav a { 
color: white; 
} 

header nav ul { 
    display: flex; /* or inline-flex */ 
    flex-wrap: nowrap; 
    align-items: stretch; 
    align-content: stretch; 
    justify-content: space-between; 
    list-style: none; 
    list-style-type: none; 
    padding: 0; 
} 

header nav li { 
    margin: auto; /* Magic! */ 
    border: 1px solid green; 
} 

Egal, was ich in Flexbox Eigenschaften nichts über die Änderungen am Layout ändern: align-Elemente ausrichten-Inhalt, rechtfertigen-Gehalt, Alle scheinen absolut nichts zu tun.

Ich möchte, dass die beiden Endelemente mit den Kanten des Containers bündig sind und ich möchte, dass sich die Li's dehnen, um den leeren Raum zu füllen. Aber ich kann nicht herausfinden, wie.

(PS Ich denke, es ist hat die Höhe der Ironie sein, dass nach Jahrzehnten nicht Tabellen verwenden erzählt wird, sie immer noch nicht mit allem, was kommen kann, die so einfach zu bedienen ist noch allgemein als reaktionsschnell.)

Answer 1

Sobald ich dies poste, beantworte ich meine eigene Frage. Der Trick besteht darin, flex-grow und flex-basis in den li Elementen, z.B. flex-grow: 1.

Answer 2

Versuchen Entfernung:

margin: auto; /* Magic! */ 

aus:

header nav li{ 

} 

Als ich dies die Biegeeigenschaften haben zu arbeiten begann.