在弹性框中将第一个元素向左对齐

Question

nav {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

nav a {
  padding: .4rem;
}

.logo {
  justify-self: start;
  display: block;
}

<nav>
  <a href="/" class="logo"><img src="/static/logo.svg" alt="PurelyGigs" /></a>
  <a href="/gigs">Gigs</a>
  <a href="/login">Login</a>
  <a href="/register">Signup</a>
</nav>

我正在尝试使用弹性盒将徽标仅向左对齐，将其他三个导航项向右对齐...而不必使用包装器

Answer 1

您可以用于margin-left: auto;第二个链接。它还可以简化 CSS 的其余部分。如果您愿意，可以为第二个链接使用类。

nav {
  display: flex;
}

nav a {
  padding: .4rem;
}

.logo {
  display: block;
}

/* Added */

nav a:nth-child(2) {
  margin-left: auto;
}

<nav>
  <a href="/" class="logo"><img src="/static/logo.svg" alt="PurelyGigs" /></a>
  <a href="/gigs">Gigs</a>
  <a href="/login">Login</a>
  <a href="/register">Signup</a>
</nav>