如何在flex列布局的第n个元素后包装?

Question

我已经看过很多关于SO的帖子，比如如何指定一个元素之后在css flexbox中包装?但它们都是基于行的布局。我有一个固定的html是由drupal生成的。任务是强制第三个li之后的任何li进入第二列，并保持高度auto:

ul {
background: gray;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 250px;
}
li {
width: 100px;
}
li:nth-child(3) {
flex-basis: 100%;
}

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

所以第一列需要固定3个元素，所有其他元素应该被推到第二列。请注意，ul不能有固定的高度，和html结构可以改变只有一点点与drupal的小树枝。

Answer 1

因为你不能设置固定的高度，flex将无法工作。

你需要在容器上设置一个高度限制来触发换行。

但是，Grid的布局非常简单:

ul {
display: grid;
grid-auto-columns: 100px; /* width of grid columns */  
grid-auto-flow: column;  /* directional flow of the items */
width: 250px;
background: gray;
}
li:nth-child(n + 4) {
grid-column: 2; /* every item after the 3rd goes to column 2 */
}

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