使用 Flexbox 构建列时，文本不会向下流动

Question

我有以下结构，我希望列表项元素按列排列，但最后一个元素（如果文本溢出）必须占据第二行上的所有空间。

ul {
    display: flex;
    flex-direction: row-reverse;
    gap: .5em;
    width: 500px;
  li {
    list-style: none;
  }
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</li>
  <li><a href="#" class="link">Link</a></li>
  <li><a href="#" class="link">Link</a></li>  
</ul>

Answer 1

我相信这就是您所需要的。

ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  width: 500px;
  li {
    list-style: none;
  }
}

li:not(:has( > a)) {
  order: 1;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</li>
  <li><a href="#" class="link">Link 1</a></li>
  <li><a href="#" class="link">Link 2</a></li>
</ul>