显示柔性对齐到右侧

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

您可以使用justify-content: flex-end

上的.navigation执行此操作

.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>

Answer 2

将flex-direction: row-reverse;添加到.navigation

    .navigation {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        background: rgb(255,255,255);
        flex-direction: row-reverse;/* Here is what you are looking for*/
    }
    ul {
        list-style:none;           
        border:1px solid black;
    }
    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>