CSS下拉菜单单独的第一个项目

Question

我正在尝试使用FlexBox在CSS中构建菜单。我已经做出了响应的响应，因此从水平菜单到下拉菜单都会收缩。

但我很难将第一个菜单链接与其他菜单分开，然后在其余的右边放在左边。如图所示

有什么建议吗？

菜单示例

Answer 1

从您的图像中，我认为这是您想要的非常简单的示例。

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 */
}

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