Flexbox 导航菜单

Question

我正在尝试创建一个导航菜单，其中一个（或多个）项目固定在左侧。

我试过使用 align-self: flex-start;，但除非设置 flex: 1;，否则它不会让步，在这种情况下，项目会填满所有剩余的 space，这是我不想要的。

HTML:

<ul>
   <li class="left">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

我想要这个：

| [ 1 ]            [ 2 ] [ 3 ] [ 4 ] |

或

| [ 1 ] [ 2 ]            [ 3 ] [ 4 ] |

不是：

| [ 1            ] [ 2 ] [ 3 ] [ 4 ] |

或

| [ 1 ] [ 2            ] [ 3 ] [ 4 ] |

我想要的效果将通过 class left 应用，因为所有项目当前 justify-content: flex-end;

Answer 1

您要做的是将 margin-left:auto; 添加到您的第一个右对齐元素。这会将那个元素和所有下一个元素推到右边。

nav {
    background:#d8d8d8;
    display:flex;
    padding:1px;
}

a {
    background:white;
    margin-right:1px;
    padding:3px;
}
a.start_right { margin-left:auto; } 
a:last-child { margin-right:0; }

<nav>
    <a href='#'>Link 1</a>
    <a href='#' class='start_right'>Link 2</a>
    <a href='#'>Link 3</a>
    <a href='#'>Link 4</a>
</nav>

Flexbox 导航菜单

Flexbox Nav Menus

css

flexbox