html - 根据视口(viewport)宽度列出列布局

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>