Question

我正在尝试创建简单的页面标题，该页面标题的左侧带有徽标，而链接则均匀地分布在右侧。像这样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)的第一次加载后，布局正确。它还可以适当缩放以调整视口大小。然后，单击某些链接后，<nav>会变窄，并且flex不再灵活-当视口执行(screenshot from Chrome after the bug occures)时，大小不会更改。在Firefox和Edge上，此解决方案根本不起作用-始终存在错误。 You can test this page here.更令人困惑的是，页脚（由flexbox制成）在同一页面上正常工作。如何修复代码以使标题看起来像预期的那样？

Answer 1

header {
  height: 75px;
  border-bottom: #707070 solid 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header .logo {
  flex-grow: 2;
  flex-basis: auto;
  padding: 5px 0;
}

header nav {
  flex-grow: 1;
  flex-basis: auto;
  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="https://picsum.photos/200/50" />
    </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>

Answer 2

您正在使用静态margin。最好使用相对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>

重新加载后Flexbox会更改大小

2 个答案: