html - Flexbox 在重新加载后改变大小

Question

我正在尝试创建简单的页眉，在左侧带有 Logo ，在右侧平均分配链接。像这样render from Adobe Xd presenting expected header design .为此，我编写了这段代码(片段缺少图像并且对于这个边距来说有点太窄了):

header {
  margin: 0 200px;
  height: 75px;
  border-bottom: #707070 solid 2px;
  display: flex;
  flex-direction: row;
}

header .logo {
  flex-grow: 2;
  flex-basis: 0;
  padding: 5px 0;
}

header nav {
  flex-grow: 1;
  flex-basis: 0;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

header nav a {
  align-self: flex-end;
}

<header>
  <div class="logo">
    <a href="home.html">
      <img alt="Logo Hufca" src="logo_hufca_zlote.svg" />
    </a>
  </div>
  <nav>
    <a href="active.html">Działalność</a>
    <a href="unit.html">Jednostki</a>
    <a href="docs.html">Dokumenty</a>
    <a href="contact.html">Kontakt</a>
  </nav>
</header>

在某些情况下，此解决方案在 Chrome 和 Opera 上按预期工作。第一次加载页面后布局正确 (screenshot from Chrome after the first page load) .它还可以充分缩放以调整视口(viewport)大小。然后，点击一些链接后，<nav>变窄和flex不再灵活 - 当视口(viewport)不改变大小时 (screenshot from Chrome after the bug occures) .在 Firefox 和 Edge 上，此解决方案根本不起作用 - 错误一直存在。 You can test this page here.更令人困惑的是，页脚(由 flexbox 制作)在同一页面上正常工作。如何修复我的代码以使标题看起来像预期的那样？

Answer 1

您正在使用静态边距。最好使用相对的 CSS 规则来实现内容和边框之间的空间。此外，您不需要设置 flex-grow 和 flex-basis。

但主要问题是 img { height: 100% } 导致 img 元素上升到其完整高度。你必须给 header .logo 一个 max-height 属性。最好用填充实现导航元素之间的空间。

这是一个可能的解决方案:

header {
  margin: 0 auto;
  max-width: 90%;
  height: 75px;
  border-bottom: #707070 solid 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header .logo {
  padding: 5px 0;
  height: 100%;
  max-height: 65px;
}

img {
   height: 100%;
}

header nav {
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

header nav a {
  align-self: flex-end;
  padding-right: 10px;
}

header nav a:last-child {
  padding-right: 0;
}

<header>
  <div class="logo">
    <a href="home.html">
      <img alt="Logo Hufca" src="https://wip.733mdh.pl/user/themes/motyw-hufca/images/logo_hufca_zlote.svg">
    </a>
  </div>
  <nav>
    <a href="active.html">Działalność</a>
    <a href="unit.html">Jednostki</a>
    <a href="docs.html">Dokumenty</a>
    <a href="contact.html">Kontakt</a>
  </nav>
</header>