Ausrichten Liste auf der linken Seite des Behälters in Flexbox

Question

Also habe ich gerade gelernt Flexbox, aber auch nach justify-content: flex-start; der Liste besagt, ausgerichtet ist, nicht auf der linken Seite der Säule wie folgt:

Image of the problem

Im Wesentlichen möchte ich die Liste auf die linke Seite des #navigation Containers ausrichten, so dass kein Platz wie im obigen Bild vorhanden ist. Irgendwelche Ideen was zu ändern?

#navigation { 
 
    min-height: 50px; 
 
    width: 100%; 
 
    background-color: #2F4E6F; 
 
} 
 

 
.navflex { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    justify-content: flex-start; 
 
} 
 

 
.navflex a { 
 
    text-decoration: none; 
 
    text-decoration: none; 
 
    font-family: 'Open Sans'; 
 
    font-size: 25px; 
 
    color: #FFFFFF; 
 
    display: block; 
 
    padding: 5px 25px; 
 
    text-align: center; 
 
} 
 

 
#home_button { 
 
    width: 38px; 
 
    height: 38px; 
 
} 
 

 
.tilde { 
 
    color: #FFFFFF; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    font-family: 'Open Sans'; 
 
    padding: 7px 0px; 
 
} 
 

 
@media all and (max-width: 800px) { 
 
    .navflex { 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    } 
 
    .tilde { 
 
    display: none; 
 
    } 
 
}

<div id="navigation"> 
 
    <ul class="navflex"> 
 
    <li> 
 
     <a href="#"><img src="images/home_button.png" alt="An icon representing a house." id="home_button"></a> 
 
    </li> 
 
    <li><a href="#">Phantom of the Opera</a></li> 
 
    <li class="tilde">~</li> 
 
    <li><a href="#">The Lion King</a></li> 
 
    <li class="tilde">~</li> 
 
    <li><a href="#">Wicked</a></li> 
 
    <li class="tilde">~</li> 
 
    <li><a href="#">Bookings</a></li> 
 
    <li class="tilde">~</li> 
 
    <li><a href='#'>Location</a></li> 
 
    </ul> 
 
</div>

Answer 1

hinzufügen padding: 0; zu Ihrem ul (= .navflex) die Standardliste padding zu vermeiden. Und wenn das auf der linken Seite nicht nah genug, fügen Sie auch padding-left: 0 den li Elemente:

#navigation { 
 
    min-height: 50px; 
 
    width: 100%; 
 
    background-color: #2F4E6F; 
 
} 
 

 

 
.navflex { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    justify-content: flex-start; 
 
    padding: 0; 
 
} 
 
.navflex li { 
 
    padding-left: 0; 
 
} 
 
.navflex a { 
 
    text-decoration: none; 
 
    text-decoration: none; 
 
    font-family: 'Open Sans'; 
 
    font-size: 25px; 
 
    color: #FFFFFF; 
 
    display: block; 
 
    padding: 5px 25px; 
 
    text-align: center; 
 

 
} 
 

 
#home_button { 
 
    width: 38px; 
 
    height: 38px; 
 

 
} 
 

 
.tilde { 
 
    color: #FFFFFF; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    font-family: 'Open Sans'; 
 
    padding: 7px 0px; 
 
} 
 

 

 
@media all and (max-width: 800px) { 
 
    .navflex { 
 
    flex-direction: column; 
 
     flex-wrap: wrap; 
 
    } 
 

 
    .tilde { 
 
     display: none; 
 
    } 
 
}

<div id="navigation"> 
 
    <ul class="navflex"> 
 
      <li><a href="#"><img src="images/home_button.png" alt="An icon representing a house." id="home_button"></a></li> 
 
     <li><a href="#">Phantom of the Opera</a></li> 
 
      <li class="tilde">~</li> 
 
     <li><a href="#">The Lion King</a></li> 
 
      <li class="tilde">~</li> 
 
     <li><a href="#">Wicked</a></li> 
 
      <li class="tilde">~</li> 
 
     <li><a href="#">Bookings</a></li> 
 
      <li class="tilde">~</li> 
 
     <li><a href='#'>Location</a></li> 
 
    </ul> 
 
</div>