使用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并应用了这些属性，但我找不到将列表项分成多列的方法：

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

Answer 1

弹性容器的初始设置为flex-wrap: nowrap。

这意味着Flex项目必须保持在一行中。

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

定义容器的高度也很重要。否则，额外的弹性项目可能只是扩展容器而无需包裹。