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

Question

所以我刚刚学习了 flexbox，但是即使在声明 justify-content: flex-start; 之后，列表也没有像这样与列的左侧对齐:

Image of the problem

本质上，我想将列表对齐到 #navigation 容器的左侧，这样就不会有像上图中那样的空间。有什么想法要改变吗？

#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

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