不使用<ul>的自动宽度链接列表

Question

我正在尝试为菜单创建链接列表，我想使用ul或ol探索而不是，但我发现我的方法将a元素的大小设置为全宽，而不是li个孩子通常自动宽度的方式。

例如：

nav {
  display: flex;
  flex-direction: column;
}

<nav>
  <a>One</a><!-- these <a> children end up being full-width -->
  <a>Two</a>
  <a>Tree</a>
</nav>

Answer 1

nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* NEW */
}

默认设置为align-items: stretch，这意味着flex项目将扩展容器的整个宽度。