如何尽量使用 css 实现这样的效果?

Question

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

每一个 li 的宽度可能都不同,怎么当 li 的总宽度达到一定的大小后,例如 300px,总体上由水平布局变为垂直布局(每一个 li 都是垂直的)?

Answer 1

试一下是不是你要的效果:

    * {
      padding: 0;
      margin: 0;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      max-height: 400px;
      overflow-y: auto;
    }

    li {
      flex-grow: 1;
      padding: 8px;
      box-sizing: border-box;
    }

Answer 2

可以考虑使用 @container CSS 容器查询 - CSS | MDN