Flexbox für mobile Rahmenbreite von 100%

Question

Ich benutze Flexbox für meine Navigation und ich kann nicht scheinen, meine Grenzen richtig für meine Medienabfrage, die für Spaltenumbruch angegeben ist, zu arbeiten.

Ich möchte, dass die Ränder sich über die gesamte Breite des Geräts erstrecken, zum Beispiel möchte ich den Rahmen von links bis ganz rechts auf dem Gerät haben, und ich möchte, dass jeder ein Element aufnimmt. Zeile 'auf dem Gerät, aber derzeit die Grenzen nur auf halbem Weg und einige der li Elemente teilen eine Zeile, wenn andere nicht sind, und ich bin mir nicht sicher, warum. Auch wenn ich a Block anzeigen, funktioniert es nicht. Ich habe auch versucht, flex Basis 100% für die a-Elemente.

Edit: Ich denke, ich habe es für die Positionierung herausgefunden. Ich habe die #nav ul gemacht. nicht nur #nav Säulenumhüllung. Leider erlebe ich das Grenzproblem leider immer noch.

#nav { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    margin: 0; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: orange; 
 
} 
 
#nav li a { 
 
    color: white; 
 
    margin: 15px; 
 
    padding: 5px; 
 
    display: block; 
 
    ; 
 
    text-decoration: none; 
 
    font-size: 24px; 
 
    font-family: courier; 
 
} 
 
#nav li { 
 
    list-style: none; 
 
} 
 
#nav ul { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    margin: 0; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
@media all and(max-width: 800px) { 
 
    #nav { 
 
    justify-content: space-around; 
 
    } 
 
} 
 
@media all and (max-width: 500px) { 
 
    #nav { 
 
    flex-flow: column wrap; 
 
    padding: 5px; 
 
    } 
 
    #nav li a { 
 
    flex: 1 100%; 
 
    display: block; 
 
    padding: 5px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    } 
 
}

<div id="nav"> 
 
    <ul> 
 
    <li> <a href="#">Calendar </a></li> 
 
    <li> <a href="#">Events </a></li> 
 
    <li> <a href="#">Hours </a></li> 
 
    <li> <a href="#">Contact </a></li> 
 
    <li> <a href="#">About </a></li> 
 
    </ul> 
 
</div>

Answer 1

versuchen, die Standard Polsterung auf ul Element zurückzustellen.

ul { 
    padding-left: 0; 
} 

zurückgesetzt auch den Standard-Marge auf body, wenn nötig.

body { 
    margin: 0; 
} 

Für den Flexbox Teil sollten Sie display: flex; auf #nav ul gesetzt, anstatt #nav. Sie müssen keinen Stil auf #nav tatsächlich festlegen. Wenn Sie möchten, dass jeder li in der Medienabfrage eine Breite von 100% hat, können Sie flex item auf flex: 1 1 100%; setzen, Arbeitsbeispiel in der Geige unten.

@media all and (max-width: 500px) { 
    #nav li { 
    flex: 1 1 100%; 
    padding: 5px; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    } 
} 

jsFiddle