Flex Navbar失去居中

Question

笔在这里。

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

典型的网站标题内联块显示，标志div在左侧和navbar在右侧。我需要有柔性包装的navbar以适应各种设备宽度，至少直到屏幕宽度=600px，在那里它可以变成一个汉堡包。所以我使导航列表高度为列表项高度的3倍。问题是，如果我将nav块浮动到标题中的右侧，则nav item-list将只在logo-div下包装，而不是在logo-div旁边包装。我可以通过将浮点从导航块中完全移除来解决这个问题。但现在缩放时导航块向左漂移，所以整个页面看起来偏离中心。

有人有什么主意吗？

Answer 1

如果我没有理解错的话，你有一个问题，当屏幕较小时，项目没有对齐。最好的方法是使用display:flex轻松实现对齐。我已经做了一个示例代码，希望它能帮助您解决问题(align-items-center在屏幕大小更改时，将所有项目（包括您的徽标）对齐到行的中心。如果不需要，可以将其删除）

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小提琴链接:https://jsfidle.net/sj_killshot/7u36m194/