Flex 导航栏无法居中

Posted 2023-03-29

【中文标题】Flex 导航栏无法居中

【英文标题】：Flex Navbar Loses Centering

【发布时间】：2019-10-13 21:52:34

【问题描述】：

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;

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

有人有什么想法吗？

编辑

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

【问题讨论】：

不会在标题中添加`display: flex;`来解决它吗？

不，很遗憾。导航项目列表在缩小时向左漂移。

codepen.io/tamjk/pen/dybqKBN 这样就解决了问题。

【参考方案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://jsfiddle.net/SJ_KIllshot/7u36m194/

【讨论】：

这不是我想要的效果。这样做不会阻止导航栏在缩放下向左漂移。它还可能将 logo-div 向下推。

发现了一个小改进。从