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

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

我会使用多列布局来实现这一点。多列为您提供所需的从上到下然后从左到右的排列方式。以下是关键声明：

#files {
  columns: 200px 4;
  gap: 10px;
  max-width: 1030px; /* 4 times 250px plus 3 times 10px */
}

第一个声明表示您需要最小宽度为 200 像素的列，并且最多需要四列。

第二个声明表示您希望列之间的间隙为 10 像素，这与

#files

列表的填充相匹配。

第三个声明表示您想要 1030 像素的总最大宽度，这足以容纳四列，每列 250 像素，加上三个每列 10 像素的间隙。因此，虽然此限制适用于总宽度，但当有四列时，它有效地将列宽限制为最大 250 像素。

请注意，当列数少于四时，这不会限制列的最大宽度。如果您确实想在这种情况下设置最大宽度，您可以给

#files li

一个

max-width

为

250px

。然而，这会导致列之间的间隙显得更大，而且我不喜欢它的外观。在较窄的视口中，我更喜欢拉伸列以填充视口。

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

#files {
  list-style: none;
  margin: 0;
  padding: 10px;
  user-select: none;
  columns: 200px 4;
  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>

运行此代码片段后，使用完整页面链接来测试响应行为。