html - 使用 flexbox 跨列打破无序列表元素

Question

有没有办法用 flexbox 打破无序列表中的列表项？我想创建一个 3 列下拉菜单。

比如我的html是:

<ul id="nav">
  <li><a href="./?>Navigation link 1</a></li>
  <li><a href="./?>Navigation link 2</a></li>
  <li><a href="./?>Navigation link 3</a></li>
  <li><a href="./?>Navigation link 4</a></li>
  <li><a href="./?>Navigation link 5</a></li>
</ul>

我不希望它这样显示:

Navigation link 1 | Navigation link 2
Navigation link 3 | Navigation link 4
Navigation link 5 |

我希望它像这样显示:

Navigation link 1 | Navigation Link 5
Navigation link 2 |
Navigation link 3 |
Navigation link 4 |

我尝试使用 flexbox 并应用了这些属性，但我找不到将列表项分成多于 1 列的方法:

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

Answer 1

flex 容器的初始设置是flex-wrap: nowrap。

这意味着 flex 元素被迫保持在一行中。

要创建多行 flex 容器，您可以使用 flex-wrap: wrap 覆盖此设置。

为容器定义高度也很重要。否则，额外的 flex 元素可能会简单地扩展容器而无需包装。