列从上到下、从左到右以及自动宽度调整

Question

我有这个结构

.flex #left {
  min-height: 230px;
}

#files {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 10px;
  position: relative;
  user-select: none;
  width: 100%;
}

#files li {
  flex: 1;
  max-width: 250px;
  min-width: 200px;
  width: 100%;
}

<div class="flex">
  <div id="left">
    <ul id="files">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      ...
    </ul>
  </div>
</div>

因此，

<li>

从左到右，然后从上到下显示。

我希望它们从上到下显示，然后从左到右显示。

我事先不知道

li

的数量。

我希望它最多有 4 列，并且

<div id="left">

具有固定高度，例如

400px

，并在必要时根据

li

的数量显示垂直滚动条。

<div id="left">

的宽度可以改变，例如，如果用户减小浏览器窗口的宽度。

列数应相应调整，知道每列都是

max-width: 250px; min-width: 200px;

Answer 1

我会使用多列布局来实现这一点。

.flex #left {
  background: purple;
  min-height: 230px;
  max-height: 400px;
  overflow: auto;
}

#files {
  list-style: none;
  margin: 0;
  padding: 10px;
  user-select: none;
  columns: 4 200px;
  gap: 10px;
  max-width: 1030px; /* 4 times 250px plus 3 times 10px */
  background: pink;
}

#files li {
  background: yellow;
}

<div class="flex">
  <div id="left">
    <ul id="files">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
    </ul>
  </div>
</div>