Flexbox Nav菜单

Question

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

我尝试使用align-self: flex-start;，但除非设置了flex: 1;，否则它不会预算，在这种情况下，该项目会填充所有剩余的空间，这是我不想要的。

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

我想要的效果将应用于课程left，因为目前所有项目都是justify-content: flex-end;

Answer 1

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

＆＃13;

＆＃13;

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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;