分割導航 - CSS | MDN

依賴項

一種常見的導航模式是讓一個元素與其他元素分開。我們可以使用 flexbox 實現此目的，而無需將兩組專案製作成兩個獨立的 flex 容器。

示例

點選下面程式碼塊中的“Play”按鈕，在 MDN Playground 中編輯示例。

html

<nav>
  <ul class="main-nav">
    <li><a href="">About</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Our Team</a></li>
    <li class="push"><a href="">Contact</a></li>
  </ul>
</nav>

css

.main-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 1.2em sans-serif;

  display: flex;
}

.main-nav a {
  padding: 0.5em 1em;
  display: block;
}

.push {
  margin-left: auto;
}