html - 显示 flex 右对齐

Question

如果我正在使用

display: flex;
align-items: center;

如何使 ul 水平对齐到右？

.navigation {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  background: rgb(255, 255, 255);
}
ul {
  list-style: none;
  /*float:right;*/
}
li {
  display: inline-block;
}
a {
  padding: 10px;
  width: 80px;
  text-decoration: none;
  display: block;
  text-align: center;
}

<div class="navigation">
  <ul>
    <li><a>Contacts</a></li>
    <li><a>About</a></li>
    <li><a>FAQ</a></li>
    <li><a>Other</a></li>
  </ul>
</div>

Answer 1

您可以在 .navigation 上使用 justify-content: flex-end 执行此操作

.navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 80px;
  background: rgb(255, 255, 255);
}

ul {
  list-style: none;
  display: flex;
  padding: 0;
}

a {
  padding: 10px 25px;
  width: 80px;
  text-decoration: none;
  text-align: center;
}

<div class="navigation">
  <ul>
    <li><a>Contacts</a></li>
    <li><a>About</a></li>
    <li><a>FAQ</a></li>
    <li><a>Other</a></li>
  </ul>
</div>