html - 如何将这些 anchor 标记移到右侧？

Question

如何使用 display: flex 将 anchor 标记向右移动？在 li a 上使用 margin-left: auto 不起作用。

ul {
  list-style-type: none;
  display: flex;
  /* added */
  align-items: center;
  /* added; vertical alignment */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<div id="navbar">
  <ul>
    <li><img src="img/logo.png" width="75" height="75"></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>

Answer 1

margin 应该应用在 flex children 上，这里我认为是第二个 li

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* update */
li:nth-child(2) {
  margin-left: auto;
}

<div id="navbar">
  <ul>
    <li><img src="img/logo.png" width="75" height="75"></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>

---

margin也可以从first li开始

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* update */
li:first-of-type {
  margin-right: auto;
}

<div id="navbar">
  <ul>
    <li><img src="img/logo.png" width="75" height="75"></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>

如果只是装饰但与布局交互，则可以通过伪元素插入 Logo

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* update */
ul:before {
content:url(http://dummyimage.com/75x75&text=logo);
margin-right:auto;
}

<div id="navbar">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>