html - 更改特定元素的 justify-content 属性

Question

我想移动我的 <h1> flex-start 中的元素方向，所以我用了align-self覆盖初始方向，但没有用。

HTML:

<div class="container">
  <h1>Logo</h1>
  <ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS:

.container {
  background: deepskyblue;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}

.container h1 {
  align-self: flex-start;
}

.navigation {
  display: flex;
  list-style: none;
}

.navigation a {
  color: white;
  padding: 1rem;
  text-decoration: none;
  display: inline-block;
}

.navigation a:hover {
  background-color: red;
}

CodePen

Answer 1

如果你想要 <h1> aligned at start 你想设置 justify-content其父级的属性space-between .你不需要 align-self在 <h1> :

.container {
  background: deepskyblue;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.container h1 {
  color: white;  
}

Updated pen .