时间戳

首页 > 解决方案 > Flexbox 在重新加载后改变大小

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

问题描述

我正在尝试创建简单的页眉，左侧带有徽标，右侧均匀分布链接。就像这个来自 Adob​​e Xd 的渲染呈现预期的标题设计一样。为此，我编写了以下代码（片段缺少图像并且对于此边距而言有点太窄）：

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 上的某些情况下按预期工作。首次加载页面后布局正确（第一次加载页面后来自 Chrome 的屏幕截图）。它还可以充分缩放以调整视口大小。然后，在单击一些链接后，<nav>变得更窄并且flex不再灵活 - 当视口发生时不会改变大小（发生错误后来自 Chrome 的屏幕截图）。在 Firefox 和 Edge 上，这个解决方案根本不起作用——错误总是出现。 你可以在这里测试这个页面。更令人困惑的是页脚（使用 flexbox 制作）在同一页面上正常工作。如何修复我的代码以使标题看起来符合预期？

标签： htmlcssflexbox

解决方案

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>

推荐阅读