Flexbox垂直布局中如何在第n个元素后换行并保持高度自适应？

问题分析 #

你需要在不设置固定高度的情况下，让<ul>里的前3个<li>留在第一列，剩余所有<li>自动转入第二列，且HTML结构仅能通过Twig做小幅修改。你之前尝试的Flex垂直布局方案依赖固定高度触发换行，无法满足高度自适应的需求。

最优方案：使用CSS Grid（无需修改HTML结构） #

CSS Grid能直接通过列定位实现需求，不需要依赖容器高度，完美适配高度自适应场景。

ul {
  background: gray;
  display: grid;
  grid-template-columns: 100px 100px; /* 定义两列，每列宽度100px */
  width: 250px; /* 保持你原有的容器宽度 */
  /* 可选：如果需要列间距，添加 gap: 10px; */
}

/* 前3个<li>放在第一列 */
li:nth-child(-n+3) {
  grid-column: 1;
}

/* 第4个及以后的<li>放在第二列 */
li:nth-child(n+4) {
  grid-column: 2;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>Unlimited</li>
</ul>

方案说明

• 无需修改现有HTML结构，纯CSS实现，符合你对结构的限制。
• 第一列高度由前3个<li>的总高度决定，第二列元素自动垂直排列，<ul>的高度会自适应两列中较高的一列，完全满足高度自适应要求。
• 选择器逻辑清晰：nth-child(-n+3)匹配前3个元素，nth-child(n+4)匹配第4个及以后的所有元素。

替代方案：Flexbox + Twig小幅修改（兼容旧浏览器） #

如果需要兼容不支持Grid的旧浏览器，可以通过Twig将列表拆分为两个子容器，再用Flex水平布局实现：

Twig修改（小幅调整结构）

<ul>
  <div class="col-left">
    {% for item in items|slice(0, 3) %}
      <li>{{ item.content }}</li>
    {% endfor %}
  </div>
  <div class="col-right">
    {% for item in items|slice(3) %}
      <li>{{ item.content }}</li>
    {% endfor %}
  </div>
</ul>

对应CSS

ul {
  background: gray;
  display: flex;
  width: 250px;
  /* 可选：列间距 */
  gap: 10px;
}

.col-left, .col-right {
  display: flex;
  flex-direction: column;
  width: 100px;
}

方案说明

• 通过Twig的slice过滤器将列表拆分为前3项和剩余项，分别放入两个容器中。
• <ul>设为Flex水平布局，两个子容器作为列，各自垂直排列内部的<li>，容器高度自动适配内容。

为什么你原来的Flex方案不可行？ #

在flex-direction: column的布局中，flex-wrap: wrap只有当容器有固定高度时才会触发换行。你给第3个<li>设置flex-basis: 100%只会让它占满容器高度，但后续元素仍会在第一列继续向下排列，无法实现转入第二列的效果，且容器高度无法自适应内容。

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