CSS Flexbox列表排列顺序调整：实现目标布局的方法咨询

要实现这种纵向优先、自动分栏的排列，我们只需要调整Flexbox的主轴方向，让元素先沿垂直方向排列，再换行到右侧列。具体操作如下：

1. 给容器设置flex-direction: column（把主轴从横向改成垂直方向），同时保留flex-wrap: wrap允许元素换行
2. 给容器设置一个刚好能容纳3个列表项的高度，这样第4个元素就会自动“流”到右侧列

假设每个列表项的高度是2rem（你可以根据实际样式调整），容器高度就设为3 * 2rem = 6rem。完整代码示例：

.list_number {
  display: flex;
  flex-direction: column; /* 垂直方向排列元素 */
  flex-wrap: wrap; /* 允许元素换行到右侧 */
  height: 6rem; /* 刚好放下3个li的高度 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.list_number > li {
  width: 50%; /* 每列占容器宽度的一半 */
  height: 2rem;
  line-height: 2rem; /* 让文字垂直居中 */
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 0 1rem;
}

对应的HTML结构不变：

<ul class="list_number">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

这样元素会先填满左侧列的3个位置，剩余的自动排布到右侧列，正好实现1 4、2 5、3 6的效果。

这个需求的核心是让左侧列容纳4个元素，右侧列容纳3个元素。同样用flex-direction: column + flex-wrap的思路，只需要调整容器高度为4个列表项的高度之和：

.list_number {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 8rem; /* 现在能放下4个li的高度 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.list_number > li {
  width: 50%;
  height: 2rem;
  line-height: 2rem;
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 0 1rem;
}

HTML添加第7个元素：

<ul class="list_number">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

此时容器高度足够放下4个垂直排列的li，第5个元素会换行到右侧列顶部，最终呈现1 5、2 6、3 7、4的排列效果。

小提示 #

如果列表项的高度不固定，你可以用JavaScript动态计算容器高度：先获取单个li的实际高度，再根据需要的列元素数量（3个或4个）来设置容器的height值。要是你需要更灵活的自适应多列布局，也可以考虑CSS Grid，但既然你指定用Flexbox，上面的方案完全能满足需求。

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