html - Flex 导航栏不在 768 像素及更小的屏幕上居中

Question

我不明白为什么导航栏不会在较小的屏幕上居中。

我认为这与 nav ul 在家附近的空间有关(以及我缺乏 flex-knowledge)。

这里有一支笔，你可以用它缩小窗口，看看 home 旁边的左边空间不会变小，并且水平导航栏不居中。

#header-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  border: solid black;
  flex: 1;
  background-image: url(fresh-snow.png);
  background-color: #480459;
  color: white;
}

nav {
  border: solid;
  display: flex;
  flex: 4;
}

nav ul {
  border: solid;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  flex: 1;
  justify-content: space-evenly;
}

<div id="header-wrapper">
  <hgroup>
    <h1>Marina Heide</h1>
    <h2>Översättare</h2>
    <h3>från svenska, norska, danska till franska</h3>
  </hgroup>
  <nav>
    <ul class="navigation">
      <li><a href="#">home</a></li>
      <li><a href="#">kontakta mig</a></li>
      <li><a href="#">vem jag är</a></li>
    </ul>
  </nav>
</div>
<div id="main"> .
  <p>Jag översätter böcker, webbsidor, serier och filmer.
    <p>
</div>

https://codepen.io/cykelcykel/pen/eYYBMpq

当 flex-direction 设置为 column 时，我希望导航栏居中。

Answer 1

ul class naviation 元素左侧有一个 40px 的内边距。在更大的屏幕上，40px 几乎可以忽略不计。所以看起来导航栏是居中对齐的。但是如果你仔细观察，你会发现导航栏向右侧稍微有点小。添加以下代码以取消左侧填充。

nav ul {
    border: solid;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;
    flex: 1;
    justify-content: space-evenly;
    padding-left: 0;
}

代码笔:https://codepen.io/ashfaq_haq/pen/VwwmEdv