将列表对齐到flexbox中容器的左侧

Question

所以我刚学会了flexbox，但即使在说明justify-content: flex-start;之后，列表也没有与列的左侧对齐，如下所示：

Image of the problem

基本上我想将列表对齐#navigation容器的左侧，以便不存在如上图所示的空格。任何想法改变什么？

＆＃13;

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将padding: 0;添加到ul（= .navflex）以避免默认列表填充。如果距离左侧不够近，还要将padding-left: 0添加到li元素：

#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>