用flexbox创建一个固定的头文件

Question

使用flexbox我正在尝试创建一个仅包含两个元素的固定标头，并且这些元素彼此之间的距离应尽可能远。我似乎无法使它与justify-content: space-between一起使用。

我希望这段CSS代码能够正常工作，但是元素只是彼此相邻。

header {
  width: 100%;
  position: fixed;
  display: flex;
  align-content: space-between;
}

<header>
<a>
  LOGO
  </a>
  <a>
  MENU
  </a>
</header>

Answer 1

您几乎拥有了它。使用justify-content，而不是align-content。

编辑：正如评论者所指出的那样，还需要left: 0才能真正将每个flex子元素固定在各自的角落。超过默认浏览器边距的另一种方法是改为添加html, body { margin: 0; }。

header {
  display: flex;
  width: 100%;
  position: fixed;
  left: 0;
  justify-content: space-between;
}

<header>
  <a>
  LOGO
  </a>
  <a>
  MENU
  </a>
</header>