根据视口宽度以列布局列出

Question

如何使用CSS从一个列表中创建多列？ 列数必须根据媒体查询的屏幕宽度而变化，如下所示：

大屏幕：

Row1 Row6  Row11
Row2 Row7  Row12
Row3 Row8  Row13
Row4 Row9  Row14
Row5 Row10

中间屏幕：

Row1 Row8
Row2 Row9
Row3 Row10
Row4 Row11
Row5 Row12
Row6 Row13
Row7 Row14

小屏幕：

Row1
Row2
Row3
Row4
Row5
Row6
Row7
Row8
Row9
Row10
Row11
Row12
Row13
Row14

这是我的HTML代码：

<ul>
  <li>Row1</li>
  <li>Row2</li>
  <li>Row3</li>
  <li>Row4</li>
  <li>Row5</li>
  <li>Row6</li>
  <li>Row7</li>
  <li>Row8</li>
  <li>Row9</li>
  <li>Row10</li>
  <li>Row11</li>
  <li>Row12</li>
  <li>Row13</li>
  <li>Row14</li>
</ul>

Answer 1

您可以使用 来执行此操作CSS multi-column layout。仅仅添加support并不是最好的。

或者，如果您可以设置固定高度，则ul可以使用Flexbox等flex-direction: column;，DEMO但它并不是真正的“灵活”解决方案。

ul {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
   column-count: 3;
   list-style-type: none;
}

@media(max-width: 992px) {
  ul {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
     column-count: 2;
  }
}

@media(max-width: 480px) {
  ul {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
     column-count: 1;
  }
}

<ul>
  <li>Row1</li>
  <li>Row2</li>
  <li>Row3</li>
  <li>Row4</li>
  <li>Row5</li>
  <li>Row6</li>
  <li>Row7</li>
  <li>Row8</li>
  <li>Row9</li>
  <li>Row10</li>
  <li>Row11</li>
  <li>Row12</li>
  <li>Row13</li>
  <li>Row14</li>
</ul>