css - Flex 导航栏失去居中

Question

Pen在这里。

HTML

<header>
  <div id="logo-div">
    MyLogo
  </div>
  <nav>
    <ul class="nav-list">
      <li class="item">LINK #1</li>
      <li class="item">LINK #2</li>
      <li class="item">LINK #3</li>
      <li class="item">LINK #4</li>
      <li class="item">LINK #5</li>
    </ul>
  </nav>
</header>

CSS

header{
  display: inline-block;
  width: 90%;
}

#logo-div{
  margin-right: 50px;
  float: left;
  font-size: 28px;
  color: red;
  font-weight: 800;
  line-height: 60px;
}

nav{
  float: right;
}

.nav-list{
  display: flex;
  height: 150px;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  align-content: flex-start;
  margin: 0%;
  padding: 0%;
  width: auto;
  list-style-type: none;
}

.item{
  background-color: #d6315d;
  height: 50px;
  width: 150px;
  margin: 5px;
  text-align: center;
  line-height: 45px;
  font-weight: 600;
}

带有内联 block 显示的典型网站标题，左侧为 Logo div，右侧为导航栏。我需要有 flex-wrapping navbar 以适应各种设备宽度，至少直到 screen-width = 600px 可以将其更改为汉堡包。所以我将导航列表的高度设置为列表项高度的 3 倍。问题是，如果我将导航 block float 到标题中的右侧，导航项列表将只包裹在 Logo div 下，而不是在它旁边。我可以通过从导航 block 中完全删除 float 来解决这个问题。但现在导航 block 在缩放时向左漂移，因此整个页面看起来偏离了中心。

有人有什么想法吗？

编辑

This CodePen实现了在导航栏内的行上堆叠导航项的预期效果，而导航栏不会溢出到 Logo 下方 - 至少直到屏幕宽度低于 ~ 400px。

Answer 1

如果我理解正确，您遇到的问题是屏幕较小时元素未对齐。执行此操作的最佳方法是使用 display:flex 轻松完成对齐。我已经完成了一个示例代码，希望它能帮助您解决问题(align-items-center 当屏幕尺寸发生变化时，将包括您的 Logo 在内的所有元素对齐到行的中心。如果您不需要它你可以删除它)

HTML

<header>
  <div class="d-flex flex-row align-items-center">
    <div class="logo">
      MyLogo
    </div>
    <nav>
      <ul class="nav-list">
        <li class="item">LINK #1</li>
        <li class="item">LINK #2</li>
        <li class="item">LINK #3</li>
        <li class="item">LINK #4</li>
        <li class="item">LINK #5</li>
      </ul>
    </nav>
  </div>
</header>

CSS

.nav-list {
  display: flex;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin: 0%;
  padding: 0%;
  list-style-type: none;
}

.item {
  background-color: #d6315d;
  height: 50px;
  width: 150px;
  margin: 5px;
  text-align: center;
  line-height: 45px;
  font-weight: 600;
}

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.logo {
  margin-right: 50px;
  font-size: 28px;
  color: red;
  font-weight: 800;
}

JS Fiddle 链接:https://jsfiddle.net/SJ_KIllshot/7u36m194/