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>在开始时对齐，则需要将其“父级”的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

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

1 个答案: