Flexbox navbar, Stretch Links zu gleichen Höhen

Question

Ich habe eine Navbar, die einige Links hat, die auf mehr als 2 Zeilen Zeilenumbruch, wenn das Bildfenster ist etwas eng. Ich möchte alle Navigationselemente auf dieselbe Höhe bringen und ihren Text vertikal zentriert halten. Bisher war ich in der Lage, alles vertikal zu zentrieren, aber ich habe Probleme, die Höhe des <a>'s zu erreichen. Bitte beachten Sie codepen Beispiel unten ...

http://codepen.io/anon/pen/GovmZa

.container { 
 
    width:950px; 
 
    margin:0 auto; 
 
} 
 

 
ul { 
 
    display:flex; 
 
    align-items: stretch; 
 
    justify-content: flex-start; 
 
} 
 

 
li { 
 
    list-style-type:none; 
 
    display:flex; 
 
    flex-grow:1; 
 
    align-items:center; 
 
    flex-direction: column; 
 
    text-align:center; 
 
    border:1px solid #fff; 
 
    text-align:center; 
 
} 
 

 
a { 
 

 
    color:#fff; 
 
    padding:10px; 
 
    margin-right:1px; 
 
    flex: 1; 
 
    display: flex; 
 
    align-content: center; 
 
    align-items: center; 
 
    text-align:center; 
 
    background-color:#000; 
 
}

<div class="container"> 
 
    <p>How do I make the links stretch to be equal heights and keep text vertically aligned in the center?</p> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Can</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">somebody please help me figure</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">this</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">out</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Jedes Listenelement (li) ist bereits ein Flex-Container, sondern versuchen, die Orientierung zu column ändern.

Dann geben Sie den Ankern eine flex: 1, so dass sie alle verfügbaren Platz belegen.

li { flex-direction: column; } 
a { flex: 1; } 

Um den Text zu halten horizontal und vertikal zentriert, fügen text-align: center zum li und die Anker flex Behälter machen, als auch, in align-* Eigenschaften hinzufügen.

li { 
    flex-direction: column; 
    text-align: center; 
} 

a { 
    flex: 1; 
    display: flex; 
    align-content: center; /* will vertically center multi-line text */ 
    align-items: center; /* will vertically center single-line text */ 
} 

Revised Codepen

Answer 2

Die alle Li waren die gleiche Höhe, dann ist es die Anker-Tags innerhalb des li, die das Problem sind.

einige flex Styling denen Nehmen und es wird Ihr Problem

.container { 
 
    width:300px; 
 
    margin:0 auto; 
 
} 
 

 
ul { 
 
    display:flex; 
 
    justify-content: flex-start; 
 
} 
 

 
li { 
 
    list-style-type:none; 
 
    display:flex; 
 
    align-items: stretch; 
 
    flex-grow:1; 
 
} 
 

 
a { 
 
    display:flex; 
 
    align-items: center; 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:10px; 
 
    align-content: center; 
 
    margin-right:1px; 
 
}

<div class="container"> 
 
    <p>How do I make the links stretch to be equal heights and keep text vertically aligned in the center?</p> 
 
<ul> 
 
    <li> 
 
    <a href="#">Can</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">somebody please help me figure</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">this</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">out</a> 
 
    </li> 
 
</ul> 
 
</div>

Answer 3

I "gelöst" mit diesem Code beheben .. aber besser Warten auf eine bessere Antwort ..

.container { 
    width:600px; 
    height:100px; 
    margin:0 auto; 
} 

ul { 
    display:flex; 
    align-items: stretch; 
    justify-content: flex-start; 
    width:100%; 
} 

li { 
    list-style-type:none; 
    display:flex; 
    flex-grow:1; 
    align-items:center; 
} 

a { 
    background-color:#000; 
    color:#fff; 
    padding:10px; 
    align-content: center; 
    margin-right:1px; 
    height:25px; 
    width:100%; 
}