如何修改Flex布局CSS实现两列纵向顺序排列？

原代码实现的是行优先的两列Flex布局，效果如下：

text1 text2
text3 text4

现在要改成列优先的排列，达到如下效果：

text1 text3
text2 text4

需要调整以下CSS属性：

• 将容器ul的flex-flow属性值从row wrap改为column wrap（把排列方向从行优先改成列优先，同时允许换行）
• 给ul添加固定高度（比如height: 200px，高度需要足够容纳两列的内容，否则元素会全部垂直排列不会换行）
• 调整li的flex-basis：原代码用49vw是基于视口宽度分配行内元素宽度，现在改成列优先后，应该基于容器宽度分配，比如改成49%（配合gap:1%刚好填满一行两列）

修改后的完整CSS代码：

ul {
  display: flex;
  flex-flow: column wrap; /* 核心修改：改为列优先换行 */
  border: 2px solid red;
  list-style-type: none;
  padding: 0;
  gap: 1%;
  height: 200px; /* 必须添加：给容器设置高度，让列可以换行 */
}
li {
  flex-basis: 49%; /* 调整为基于容器宽度的百分比，适配列优先布局 */
  border: 1px solid black;
  box-sizing: border-box;
}

如果需要高度自适应，可以根据内容动态计算，比如用height: fit-content结合足够的内容高度，不过固定高度是最直接的实现方式。

内容的提问来源于stack exchange，提问作者toni