为什么 header 中的元素没有按 flexbox 对齐？这是我必须遵守的一些条件

Question

条件

我无法更改 HTML 文件中的任何内容。
我只能使用 flexbox 来做到这一点。

最终结果

现状

HTML

<header>
      <h1><a href="index.html">Super Legit News</a></h1>
      <h2><a href="index.html">Where fake news are born!</a></h2>
      <div id="signup">
        <a href="register.html">Register</a>
        <a href="login.html">Login</a>
      </div>
</header>

在CSS中我只是试了一下然后我尝试了一些其他属性但没有得到结果

body>header{
    display: flex;
    flex-direction: column;
}

header>div{
    align-self: flex-end;
}

添加后CSS

我想我在使用 flexbox 时遗漏了一些东西

Answer 1

因为你真的post 没有那么多信息，我不能给你一个非常准确的答案。但这是我想出的解决方案。我还删除了 <h2> 标签，因为它现在看起来更像您 post 编辑的图片。基本上解决方案是在底行周围添加一个包装器。

#lower {
  display: flex;
  justify-content: space-between;
}

<header>
      <h1><a href="index.html">Super Legit News</a></h1>
      <div id="lower">
        <a>Where fake news are born!</a>
        <div id="signup">
          <a href="register.html">Register</a>
          <a href="login.html">Login</a>
        </div>
      </div>
</header>

Answer 2

您可以使用 flex-flow: row wrap;

header {
  width: 100%;
  background: blue;
  display: flex;
  flex-flow: row wrap;
  padding: 30px;
}
header h1 {
  width: 100%;
  margin: 0 0 20px;
}
header h2 {
  margin: 0;
}

#signup {
  margin-left: auto;
  margin-top: auto;
}

a {
  color: white;
}

<header>
      <h1><a href="index.html">Super Legit News</a></h1>
      <h2><a href="index.html">Where fake news are born!</a></h2>
      <div id="signup">
        <a href="register.html">Register</a>
        <a href="login.html">Login</a>
      </div>
</header>

为什么 header 中的元素没有按 flexbox 对齐？这是我必须遵守的一些条件

Element in the header is not align by flexbox why? here are some conditions I has to follow

css

layout

flexbox