CSS下拉菜单分开第一项

Question

我正在尝试使用flexbox在css中构建菜单。 我已经使它响应，所以它从水平菜单缩小到下拉菜单。

但是我努力将第一个菜单链接与其他菜单链接分开并将其放在左侧而其余菜单链接在右侧。 如图所示，我想先将li放在左边的主页图标上，将剩下的li项放在右边。

有什么建议吗？

menu example

Answer 1

从你的形象来看，我认为这是你想要的一个非常简单的例子。

＆＃13;

＆＃13;

ul {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

li:first-child {
  align-self: flex-start;
  position: absolute; /* used only to preserve row alignment */
}

＆＃13;

<ul>
  <li>home</li>
  <li>whatever 1</li>
  <li>whatever 2</li>
  <li>whatever 3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;